Reactjs: Get value of radio button

Question

I'm developing a simple opinion poll as my way of ramping up on reactjs. So far I've come up with the following:

//App.js
import React, { Component } from 'react';
import './App.css';

const PollOption = ({options}) => {


return (
    <div className="pollOption">
      {options.map((choice, index) => (
        <label key={index}>
        <input type="radio" 
                name="vote" 
                value={choice.value} 
                key={index}
                defaultChecked={choice.value}
                onChange={() => this.props.onChange()}/>
                {choice.text}
        </label>
      ))}  
    </div>
   );
};



class OpinionPoll extends Component{
  constructor(props) {
    super(props);
    this.state = {selectedOption: ''}
  }

  handleClick(){
    console.log('button clicked');
  }

  handleOnChange(){
    console.log('foo');
  }

  render(){
    return (
      <div className="poll">
        {this.props.model.question}
        <PollOption 
          options={this.props.model.choices}
          onChange={() => this.handleOnChange()}/>

        <button onClick={() => this.handleClick()}>Vote!</button>
      </div>
    );
  }
}


    export default OpinionPoll;

    //index.js
    var json = {
            question: 'Do you support cookies in cakes?',
            choices:
            [
               {text: "Yes", value: 1},
               {text: "No", value: 2} 
            ]
        }
    const root = document.getElementById("root");
    render(<OpinionPoll model ={json} />, root)

I want to get the value of the radio button when the button is clicked.

Answer 1

Just a slight modification to the @Shubham Khatri answer to add a checked attribute and selected state. Demo here: https://codesandbox.io/s/vqz25ov285

const json = {
  question: 'Do you support cookies in cakes?',
  choices:
  [
    { text: 'Yes', value: '1' },
    { text: 'No', value: '2' }
  ]
}

const PollOption = ({ options, selected, onChange }) => {
  return (
    <div className="pollOption">
      {options.map((choice, index) => (
        <label key={index}>
          <input type="radio"
            name="vote"
            value={choice.value}
            key={index}
            checked={selected === choice.value}
            onChange={onChange} />
          {choice.text}
        </label>
      ))}
    </div>
  );
};

class OpinionPoll extends React.Component {
  constructor(props) {
    super(props);
    this.state = { selectedOption: '' }
  }

  handleClick() {
    console.log('submitted option', this.state.selectedOption);
  }

  handleOnChange(e) {
    console.log('selected option', e.target.value);
    this.setState({ selectedOption: e.target.value});
  }

  render() {
    return (
      <div className="poll">
        {this.props.model.question}
        <PollOption
          options={this.props.model.choices}
          onChange={(e) => this.handleOnChange(e)}
          selected={this.state.selectedOption} />
        <button onClick={() => this.handleClick()}>Vote!</button>
      </div>
    );
  }
}

render(<OpinionPoll model={json} />, document.getElementById('root'));

Answer 2

PollOption is a functional component and hence this keyword is not is not accessible to it, so onChange={() => this.props.onChange()} wont work. Also you need to pass the selected value to the parent.

Also as @RickyJolly mentioned in comments you need a checked attribute for onChange to be triggered.

const PollOption = ({options, onChange, selectedValue}) => {
  return (
    <div className="pollOption">
      {options.map((choice, index) => (
        <label key={index}>
        <input type="radio" 
                name="vote" 
                value={choice.value} 
                key={index}
                checked={selectedValue === choice.value}
                onChange={(e) => onChange(e.target.value)}/>
                {choice.text}
        </label>
      ))}  
    </div>
   );
};

class OpinionPoll extends Component{
  constructor(props) {
    super(props);
    this.state = {selectedOption: ''}
  }

  handleClick(){
    console.log('button clicked');
  }

  handleOnChange(val){
    console.log('foo', val);
  }

  render(){
    return (
      <div className="poll">
        {this.props.model.question}
        <PollOption 
          options={this.props.model.choices}
          onChange={(val) => this.handleOnChange(val)}
          selectedValue={this.state.selectedOption}
       />

        <button onClick={() => this.handleClick()}>Vote!</button>
      </div>
    );
  }
}