How can i get the value of my input radio button in react?

Question

  state = {
    value1: "YES",
    value2: "NO",
    selectedRadioInput: "",
  };
  handleChange = (e) => {
    this.setState({ selectedRadioInput: e.target.value });
  }
        <div className="toggle_radio">
          <input
            type="radio"
            value={this.state.value1}
            onChange={this.handleChange}
            className="toggle_option"
            id="first_toggle"
            name="toggle_option"
          />
          <input
            type="radio"
            value={this.state.value2}
            checked
            onChange={this.handleChange}
            className="toggle_option"
            id="second_toggle"
            name="toggle_option"
          />
          <label htmlFor="first_toggle">
            <p>YES</p>
          </label>
          <label htmlFor="second_toggle">
            <p>NO</p>
          </label>
          <div className="toggle_option_slider"></div>
          <h2>{this.state.selectedRadioInput}</h2>
        </div>
      </div>

I have the following radio input button, on load the second button is checked.. I want to be able to get the value of my selected radio button.. pls help

would want the value on change so everytime i change from yes to no or vice versa.. it updates the state value — Halal Memoirs
– Halal Memoirs, Commented Jun 12, 2020 at 11:38

Yousaf · Accepted Answer · 2020-06-12 11:34:35Z

input elements should be controlled components in react, meaning the value of the input elements will be controlled by react. With controlled components, value of the input element is driven by react state.

This way, you can easily read the value of the radio inputs from the state of your component.

Following code snippet shows the value of the selected radio input.

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      value1: 'First Radio Button Value',
      value2: 'Second Radio Button Value',
      selectedRadioInput: '' 
    };
  }

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

  render() {
    return (
      <div>
        <input
            type="radio"
            value={this.state.value1}
            onChange={this.handleChange}
            className="toggle_option"
            id="first-toggle"
            name="toggle_option"
          />
          <span>Radio Button 1</span>
          <br/>
          <input
            type="radio"
            value={this.state.value2}
            onChange={this.handleChange}
            className="toggle_option"
            id="second_toggle"
            name="toggle_option"
          />
          <span>Radio Button 2</span>
          <h2>{this.state.selectedRadioInput}</h2>
      </div>
    );
  }
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Here's the same code snippet with functional component instead of class based component

function App() {
  const [data, setData] = React.useState({
    value1: 'First Radio Button Value',
    value2: 'Second Radio Button Value',
    selectedRadioInput: '' 
  });

  const handleChange = (e) => {
    setData({ ...data, selectedRadioInput: e.target.value });
  }

  return (
      <div>
        <input
            type="radio"
            value={data.value1}
            onChange={handleChange}
            className="toggle_option"
            id="first-toggle"
            name="toggle_option"
          />
          <span>Radio Button 1</span>
          <br/>
          <input
            type="radio"
            value={data.value2}
            onChange={handleChange}
            className="toggle_option"
            id="second_toggle"
            name="toggle_option"
          />
          <span>Radio Button 2</span>
          <h2>{data.selectedRadioInput}</h2>
      </div>
  );
}

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Doesnt seem to compliment my code below tried to adjust it?, edited question
what's not working in your code? are you not able to see the value of the selected radio button?

Collectives™ on Stack Overflow

How can i get the value of my input radio button in react?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related