How to setState using RadioButton in ReactJs

Question

I was trying to setState using the radiobuttons in ReactJs but I dont know why this is not working, maybe I have something missing in my code

  var handleRadio = (event)=>{
      this.setState({views:event.target.value})
     
    }

This is my Function "handleRadio"

 <input
                    type="radio"
                    checked={this.state.views === "streets-v11"}
                    onClick={handleRadio} 
                    value="streets-v11"
                /> Street Map <br />
                <input
                    type="radio"
                    checked={this.state.views === 'outdoors-v11'}
                    onClick={handleRadio} 
                    value="outdoors-v11"
                /> Topo Map <br />
                    <input
                    type="radio"
                    checked={this.state.views === 'satellite-v9'}
                    onClick={handleRadio} 
                    value="satellite-v9"
                /> Satellite Map

and that's my code for buttons.. I was trying to call the function on radio button click and then according to that I was trying to set the value of state but this code is not working to setState in my project What's Wrong in this code ? my state name is views initialized as an empty string....

Try this. It use react-boostrap but just remove the Form.Check with normal input — kunquan
– kunquan, Commented Nov 21, 2020 at 12:09

Pankaj Chaturvedi · Accepted Answer · 2020-11-21 11:46:16Z

2

I think you should use OnChange instead the OnClick prop

change onClick={handleRadio} to OnChange={handleRadio}

answered Nov 21, 2020 at 11:46

Pankaj Chaturvedi

2083 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chitrang Sharma Over a year ago

Thank you, but this is also not working I try this,, even consolelog is also not getting called from function !!! is there is something wrong with function calling or with function ?

Haikel Fazzani · Accepted Answer · 2020-11-21 12:12:14Z

2

Here is a complete example

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      views: [
        { txt: 'streets-v11', value: false },
        { txt: 'outdoors-v11', value: true },
        { txt: 'satellite-v9', value: true }
      ]
    };
    this.handleRadio = this.handleRadio.bind(this);
  }

  handleRadio(e) {
    let views = this.state.views.slice(0);
    views = views.map((v) => {
      if (v.txt === e.target.name) v.value = !v.value;
      return v;
    });
    this.setState({ ...this.state, views });
  }

  render() {
    return (
      <h1>
        {this.state.views.map((v) => {
          return (
            <div key={v.txt}>
              <input
                name={v.txt}
                type="radio"
                checked={v.value}
                onClick={this.handleRadio}
              />
              {v.txt}
            </div>
          );
        })}
      </h1>
    );
  }
}

render(<App />, document.querySelector('#root'));

answered Nov 21, 2020 at 12:12

Haikel Fazzani

1,1112 gold badges9 silver badges15 bronze badges

2 Comments

Chitrang Sharma Over a year ago

HEyyy Thank A TON :))) ♥ ♥ Thank you soo much :)

Olivier Boissé Over a year ago

you should write handleRadio = e => {...} instead of handleRadio(e) {...}, otherwise the keywork this will not refer the class instance

Collectives™ on Stack Overflow

How to setState using RadioButton in ReactJs

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related