title: How to handle multiple radio button in map function in reactjs?
body: <p>I'm trying to send list of selected radio button ids from multiple radio button groups on clicking submit button.</p>
  <p>**My problem :**radio button are not syncing and All radio button is selected at a time.</p>
  <p>Need: I need to display the question and answer option as radio button and need to send the selected answer id to backend</p>
  <p>My Output:<a href="https://i.stack.imgur.com/lZiTt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lZiTt.png" alt="enter image description here" /></a></p>
  <p>My Code:</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;
  import Progress_bar from &quot;../Constant/Progress_bar&quot;;
  import { FontAwesomeIcon } from &quot;@fortawesome/react-fontawesome&quot;;
  import {
    faFilePdf,
    faArrowAltCircleLeft,
    faArrowAltCircleRight,
    faMagnifyingGlass,
    faDownload,
  } from &quot;@fortawesome/free-solid-svg-icons&quot;;
  import axios from &quot;axios&quot;;
  
  function QuestionPage() {
    const [count, setCount] = useState(2);
    const [nextq, setnextq] = useState(0);
  
    const [question, setQuestion] = useState([]);
    useEffect(async () =&gt; {
      const result = await axios(
        &quot;http://192.168.29.14:8000/api/controlquestion/&quot;
      );
  
      setQuestion(result.data);
    }, []);
    console.log(&quot;auestion&quot;, question);
    return (
      &lt;div&gt;
        &lt;div style={{ flexDirection: &quot;row&quot;, display: &quot;flex&quot; }}&gt;
          &lt;h1 style={{ width: &quot;60%&quot; }}&gt;Soc 2 Type I&lt;/h1&gt;
          &lt;text style={{ width: &quot;8%&quot;, marginTop: &quot;10px&quot; }}&gt;&lt;/text&gt;
          &lt;text style={{ width: &quot;15%&quot;, marginTop: &quot;10px&quot; }}&gt;&lt;/text&gt;
          &lt;h5 style={{ marginTop: &quot;10px&quot; }}&gt;&lt;/h5&gt;
        &lt;/div&gt;
        {question.map((item, index) =&gt; {
              return (
                &lt;div&gt;
                  &lt;h1 style={{color:'#000080',marginTop:50}}&gt;{item.control_name}&lt;/h1&gt;
                  &lt;div style={{marginTop:20,background:'#8080',borderRadius:15,}}&gt;
  
                  {item.question.map((c, i) =&gt; {
                    return (
                      &lt;div style={{margin:30,}}&gt;
                        &lt;h3 style={{marginTop:30}}&gt;{c.question_code} ?&lt;/h3&gt;
                        {c.options.map((op, ii) =&gt; (
                          &lt;div style={{display:'flex',flexDirection:'row'}}&gt;&lt;input style={{width:'20px'}} type='radio'&gt;&lt;/input&gt;
                          &lt;a style={{marginTop:30}}&gt;{op.option}&lt;/a&gt;
                          &lt;/div&gt;
                        ))}
                      &lt;/div&gt;
                    );
                  })}
                  &lt;/div&gt;
                &lt;/div&gt;
              );
            })}
      &lt;/div&gt;
       );
  }
  export default QuestionPage;
  </code></pre>
  <p>Api response:</p>
  <pre><code>&gt; [
  &gt;     {
  &gt;         &quot;control_id&quot;: 3,
  &gt;         &quot;control_name&quot;: &quot;Policies for information security&quot;,
  &gt;         &quot;question&quot;: [
  &gt;             {
  &gt;                 &quot;question_id&quot;: 12,
  &gt;                 &quot;question_code&quot;: &quot;is_policy_states_manage_security&quot;,
  &gt;                 &quot;option_type_id&quot;: 4,
  &gt;                 &quot;options&quot;: [
  &gt;                     {
  &gt;                         &quot;option&quot;: &quot;yes&quot;
  &gt;                     },
  &gt;                     {
  &gt;                         &quot;option&quot;: &quot;No&quot;
  &gt;                     }
  &gt;                 ]
  &gt;             },
  &gt;             {
  &gt;                 &quot;question_id&quot;: 16,
  &gt;                 &quot;question_code&quot;: &quot;is_management_review_take_place&quot;,
  &gt;                 &quot;option_type_id&quot;: 4,
  &gt;                 &quot;options&quot;: [
  &gt;                     {
  &gt;                         &quot;option&quot;: &quot;Yes&quot;
  &gt;                     },
  &gt;                     {
  &gt;                         &quot;option&quot;: &quot;No&quot;
  &gt;                     }
  &gt;                 ]
  &gt;             },
  &gt;             {
  &gt;                 &quot;question_id&quot;: 15,
  &gt;                 &quot;question_code&quot;: &quot;is_security_policy_reviwed&quot;,
  &gt;                 &quot;option_type_id&quot;: 4,
  &gt;                 &quot;options&quot;: [
  &gt;                     {
  &gt;                         &quot;option&quot;: &quot;Yes&quot;
  &gt;                     },
  &gt;                     {
  &gt;                         &quot;option&quot;: &quot;No&quot;
  &gt;                     }
  &gt;                 ]
  &gt;             } ]
  </code></pre>