reactjs- checking/unchecking of radio buttons not working

Question

I have my below code. But the radio buttons are not checking or unchecking on click.

const Radio = props => {
  const { name } = props;
  return (
    <div>
      <input
        id={name}
        type="radio"
        name="type"
        value={name}
        checked={this.state.selectedOption === { name }}
        onClick={this.handleChange.bind(this)}
      />
      <label for={name}>{name}</label>
    </div>
  );
};

With a handleChange event handler.

handleChange = e => {
  this.setState({
    selectedOption: e.target.value
  });
};

I have defined the selectedOption in my constructor.

constructor(props) {
  super(props);
  this.state = {
    error: null,
    isLoaded: false,
    selectedOption: "",
    QuestionAnswer: [],
    counter: 0
  };
}

What am I doing wrong?

https://stackoverflow.com/questions/27784212/how-to-use-radio-buttons-in-reactjs, possible answer — , Mar 09 '19 at 16:27
Possible duplicate of [How to use radio buttons in ReactJS?](https://stackoverflow.com/questions/27784212/how-to-use-radio-buttons-in-reactjs) — , Mar 09 '19 at 16:28

score 0 · Answer 1 · answered Mar 09 '19 at 16:38

0

You need to use an onChange handler instead of an onClick you can check my code here

answered Mar 09 '19 at 16:38

Prithwee Das

4,628
2
16
28

score 0 · Answer 2 · answered Mar 09 '19 at 16:38

By writing this.state.selectedOption === { name } you check if the selectedOption string is equal to a new object { name: name } which will never be true. Check against the string name directly instead.

You also want to give your function to the onChange prop instead of the onClick prop.

checked={this.state.selectedOption === name}
onChange={this.handleChange.bind(this)}

score 0 · Answer 3 · answered Mar 09 '19 at 17:08

Updates in the below snippet

1)

checked={this.state.selectedOption === {name} }

to

checked={this.state.selectedOption === name }

Corrections

{name} means first thing destructuring {name:name}, you can read more about es6 destructuring here. So you were trying to check whether the selectedOption is equal to name since there were two curly braces it means a new variable . Which is wrong you can directly check with selectedOption === name

run this snippet of code in console and check this

var a = 1
var b = 1
a === b // true
a === {b} // false

2) since you were using es6 no need to bind the method you can read more about here

  onClick={this.handleChange.bind(this)}

to

  onClick={this.handleChange}

const Radio = props => {
  const { name } = props;
  return (
    <div>
      <input
        id={name}
        type="radio"
        name="type"
        value={name}
        checked={this.state.selectedOption === name }
        onClick={this.handleChange}
      />
      <label for={name}>{name}</label>
    </div>
  );
};

handleChange = e => {
  this.setState({
    selectedOption: e.target.value
  });
};

constructor(props) {
  super(props);
  this.state = {
    error: null,
    isLoaded: false,
    selectedOption: "",
    QuestionAnswer: [],
    counter: 0
  };
}

reactjs- checking/unchecking of radio buttons not working

3 Answers3