How to get value from radio form in reactJS

Question

I Have this form in one of my react components

      <div className="form-check">
        <input
          type="radio"
          className="form-check-input"
          value={3}
          name="priority"
        />
        <label className="form-check-label">High Priority</label>
      </div>
      <div className="form-check">
        <input
          type="radio"
          value={2}
          className="form-check-input"
          name="priority"
        />
        <label className="form-check-label">Medium Priority</label>
      </div>
      <div className="form-check">
        <input
          type="radio"
          value={1}
          className="form-check-input"
          name="priority"
        />
        <label className="form-check-label">Low Priority</label>
      </div>

I then have an onclick function on a button. I want to get the value of the radio form in my function. How do I do that? Is there a way to do it with the useRef hook? Note: I am using functional components so any solution with class components will not help.

Thank you!

Does this answer your question? [Uncheck radio buttons in react](https://stackoverflow.com/questions/44317663/uncheck-radio-buttons-in-react) — Heartbit, Dec 29 '21 at 22:32
Use state to maintain the input values, and then access the state in your function when it's called. — Andy, Dec 29 '21 at 22:48
Where would I say that the radio value is equal to the state? Would I state it in each radio input? — Tamir Polyakov, Dec 29 '21 at 22:51

score 1 · Answer 1 · answered Dec 29 '21 at 23:04

Use state to maintain the value of the selected radio input.

We add one listener to the parent element so we can use event delegation which calls a function when it captures a change event from a child input element. When it's called it checks the clicked element is an input (radio) and then sets the state with its value.

The button simply logs the current state.

const { useState } = React;

function Example() {

  // Initialise state
  const [ radio, setRadio ] = useState(0);

  // When the button is clicked log the current state
  function handleClick(e) {
    console.log(radio);
  }

  // When an element is clicked
  function handleChange(e) {

    // Grab the nodeName and value from
    // the clicked element
    const { nodeName, value } = e.target;

    // Because we're using event delegation (attaching
    // an event listener to a parent element and capturing
    // events from child elements as they "bubble up" the DOM)
    // we need to check to see if the clicked element is an input
    if (nodeName === 'INPUT') {

      // Set the state with the input value
      setRadio(value);
    }
  }

  return (
    <div onChange={handleChange}>
      <div className="form-check">
        <input
          type="radio"
          className="form-check-input"
          value={3}
          name="priority"
        />
        <label className="form-check-label">High Priority</label>
      </div>
      <div className="form-check">
        <input
          type="radio"
          value={2}
          className="form-check-input"
          name="priority"
        />
        <label className="form-check-label">Medium Priority</label>
      </div>
      <div className="form-check">
        <input
          type="radio"
          value={1}
          className="form-check-input"
          name="priority"
        />
        <label className="form-check-label">Low Priority</label>
      </div>
      <button onClick={handleClick}>Show radio state</button>
    </div>
  );
};

ReactDOM.render(
  <Example />,
  document.getElementById('react')
);

button { margin-top: 0.5em; }

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

score 1 · Accepted Answer · answered Dec 29 '21 at 23:08

1

I have created demo here, you could add onChange method to each input and then save inside in a state.

Demo: https://codesandbox.io/s/tender-sinoussi-1t7fi?file=/src/App.js

answered Dec 29 '21 at 23:08

olscode

603
1
5
16

What happens when the OP adds that button he mentions in the question? How are you going to log the selected radio button? This is only half-an-answer. – Andy Dec 29 '21 at 23:23
You just need to add a button with onclick event then you manage state the onclick method use your values as you want, I have updated the demo so you can see. – olscode Dec 30 '21 at 10:37

How to get value from radio form in reactJS

2 Answers2