How to get value from radio form in reactJS

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!

Answer

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

Advertisement

Answer