Get the radio button value every time it changes in ReactJS

Question

I am trying to get the value of the radio button every time I change the active radio button in ReactJS, but the code is capturing the first change only.

in JSX

<input type="radio" name="radio" id="radio1" value="yes" onChange={(e) => this.radioChange(e)} />
<input type="radio" name="radio" id="radio2" value="no" onChange={(e) => this.radioChange(e)} />

and the function

radioChange = (e) => {
   console.log(e.target.value);
}

I need to show the selected radio button value in console every time I change the radio button selection

Please help.

Hi @Neel Debnath please see link jsbin.com/vodowiyoda/4/edit?js,output, it has sample of radio button functionality in react. — ankitkanojia
– ankitkanojia, Commented Sep 21, 2019 at 15:46
Even i post simple example of react js similar to you're question, Hope it helps you!!! — ankitkanojia
– ankitkanojia, Commented Sep 21, 2019 at 15:50
Can you show a minimal reproducible example? Is this a functional or class component? — ggorlen
– ggorlen, Commented Sep 21, 2019 at 15:52
@ankitkanojia this is surely helpful, Thanks for you time :) — Neel Debnath
– Neel Debnath, Commented Sep 21, 2019 at 16:03

ankitkanojia · Accepted Answer · 2019-09-21 15:50:02Z

3

class App extends React.Component {
  
  radioChange(event) {
    console.log(event.target.value);
  }
  
  render() {
    return ( 
      <div>
        <input type="radio" name="radio" id="radio1" value="yes" onChange={(e) => this.radioChange(e)} /> Yes
        <input type="radio" name="radio" id="radio2" value="no" onChange={(e) => this.radioChange(e)} /> No
      </div>
     )
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

answered Sep 21, 2019 at 15:50

ankitkanojia

3,1224 gold badges24 silver badges37 bronze badges

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

3 Comments

Neel Debnath Over a year ago

Thanks for the answer, but still in my browser console, only the first response is showing.

Neel Debnath Over a year ago

Working now, I had checked on off the value in default. After removing this, it is working. Thanks a lot :)

ggorlen Over a year ago

So I guess the problem was that OP used an arrow function when they should have used a class function? A bit of description of why this solves the problem is always welcome for future visitors' benefit.

Collectives™ on Stack Overflow

Get the radio button value every time it changes in ReactJS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related