Conditionally remember radio button selection in React

Question

I am creating a modal to filter for profiles, on react-bootstrap and redux.

I need to filter to remember it's previous selection every time the user reopen it, even if he returns from another page. It works fine with value based components, such as "range slider" or "text search" because I can grab the previous saved redux store and plug into the component's attribute, such as:

value={rangeValue}

But for radio buttons, I am not sure since the attribute itself, "checked", is its own value.

      <Form.Check
        inline
        label="male"
        name="male"
        checked   <-----------
        onChange={(e) => onRadioChange(e)}
      />

I want it to show "checked" only if the user has previously done so. I already have the user choice (whether checked or not) saved in my store, but don't know how to plug it in conditionally.

The returned JSX below

import React, { useState } from "react";
import { Form, Button } from "react-bootstrap";

...

<Form>
  <div className="form_content_wrap">
    <Form.Group>
      <Form.Label htmlFor="formControlRange">Age: {rangeValue}</Form.Label>
      <Form.Control
        type="range"
        className="form-control-range"
        id="formControlRange"
        min="0"
        max="100"
        value={rangeValue}
        onChange={(e) => setRangeValue(e.currentTarget.value)}
      />
    </Form.Group>

    <Form.Group>
      <Form.Label htmlFor="formControlRange">Gender: &nbsp;</Form.Label>

      <Form.Check
        inline
        label="female"
        name="female"
        onChange={(e) => onRadioChange(e)}
      />

      <Form.Check
        inline
        label="male"
        name="male"
        checked   <<<------- THIS IS WHERE I WANT TO CHANGE
        onChange={(e) => onRadioChange(e)}
      />
    </Form.Group>

    <Form.Group>
      <Form.Label>Keyword</Form.Label>
      <Form.Control
        type="text"
        placeholder="search description"
        value={descValue}
        onChange={(e) => setDescValue(e.currentTarget.value)}
      />
    </Form.Group>


    <Button
      variant="primary"
      type="submit"
      onClick={onFormSubmit}
      style={{ marginRight: "10px" }}
    >
      Submit
    </Button>
    <Button variant="primary" type="submit" onClick={onFormClear}>
      Clear
    </Button>[enter image description here][1]
  </div>
</Form>

Thanks

Thanks @timtim17. You answered my question. There was an issue where the radio button cannot be unchecked once the default value is selected; I fixed it by using checkbox instead and using controlled component with state. — Sean, Sep 05 '20 at 22:35

score 0 · Accepted Answer · answered Sep 05 '20 at 08:37

React appears to be smart enough automatically remove the attribute if you set it equal to a Javascript expression that is not truthy. You should be able to just pull this state from your store. See this question for more details.

<Form.Check checked={true} />
<Form.Check checked={false} />

Conditionally remember radio button selection in React

1 Answers1