Agfdhyk

I have a radio button that when true/checked it shows that option as select. The problem I have is that all options are selected as true within my radio group mapping. Here is an codesandbox example - https://codesandbox.io/s/73k0onx32x

  <RadioGroup

    aria-label="matches"

    name="matches"

    value={String(this.state.value)}

    onChange={this.handlePersonToggle}

  >

    {data.map(person => (

      <FormControlLabel

        onClick={e => this.setState({ checked: !this.state.checked })}

        checked={this.state.checked}

        key={String(person.Id)}

        value={String(person.Id)}

        control={<Radio color="primary" />}

        label={

          <div>

            {this.state.checked === true && <div>if true show</div>}

          </div>

        }

      />

    ))}

  </RadioGroup>

Any help would be appreciated here.

This is the working demo: https://codesandbox.io/s/l261qp002m

Final code

class RadioButtonsGroup extends React.Component {

  state = {

    value: 1

  };



  handlePersonToggle = event => {

    // console.log(typeof event.target.value)   //string

    this.setState({ value: event.target.value });

  };



  render() {

    const { classes } = this.props;

    return (

      <RadioGroup

        aria-label="matches"

        name="matches"

        value={String(this.state.value)}

      >

        {data.map(person => {

          return (

            <FormControlLabel

              onClick={e => this.handlePersonToggle(e)}

              key={String(person.Id)}

              value={String(person.Id)}

              control={<Radio color="primary" />}

              label={

                <div>

                  {this.state.value == person.Id ? <div>if true show</div> : ""}

                </div>

              }

            />

          );

        })}

      </RadioGroup>

    );

  }

}

There are several things that we need to fix.

Firstly, we don't need the checked attribute on the FormControlLabel component and also don't need to manage the state checked, just the value attribute of RadioGroup and FormControlLabel components are enough, as long as they match, it will know which option is selected.

Secondly, since we're passing the String(this.state.value), hence, our event.target.value become a string rather than an integer. Therefore, we can't use the strict comparison ===, we use the == instead.

Finally, we write the event handler for the onClick event on the FormControlLabel component.

Your component state contains a single value, checked, which can be set to true or false. You will need something like a value containing the id of the selected item.

Try something like this

<RadioGroup

  aria-label="matches"

  name="matches"

  value={String(this.state.value)}

  onChange={this.handlePersonToggle}

>

  {data.map(person => (

    <FormControlLabel

      onClick={e => this.setState({ selectedItem: person.Id })}

      checked={this.state.selectedItem === person.Id}

      key={String(person.Id)}

      value={String(person.Id)}

      control={<Radio color="primary" />}

      label={

        <div>

          {this.state.selectedItem === person.Id && <div>if true show</div>}

        </div>

      }

    />

  ))}

</RadioGroup>

You'r onClick handling is wrong. I have fixed the problem as below also

  <RadioGroup

    aria-label="matches"

    name="matches"

    value={String(this.state.value)}

    onChange={this.handlePersonToggle}

  >

    {data.map(person => (

      <FormControlLabel

        onClick={e => this.setState({ checked: person.Id })}

        checked={this.state.checked}

        key={String(person.Id)}

        value={String(person.Id)}

        control={<Radio color="primary" />}

        label={

          <div>{this.state.checked === person.Id && <div>true</div>}</div>

        }

      />

    ))}

  </RadioGroup>