title: Set radio button value in React
body: <p>I am making a simple react app with form that has radio buttons.</p>
  <p>Here there is a default data available like,</p>
  <pre><code>const defaultData = [{ ContactMode: 3 }, { ContactMode: 2 }, { ContactMode: 2 }];
  </code></pre>
  <p><strong>Requirement:</strong></p>
  <p>-&gt; Need to iterate this <code>defaultData</code> and assign their respective <code>ContactMode</code> mode as checked in each row.</p>
  <p><strong>Working Snippet:</strong></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const { useState } = React;
  
  const App = () =&gt; {
    const [formValue, setFormValue] = useState({
      ContactMode: 1
    });
  
    const defaultData = [{ ContactMode: 3 }, { ContactMode: 2 }, { ContactMode: 2 }];
  
    const handleInputChange = (e, index) =&gt; {
      const { name, value } = event.target;
      setFormValue({
        ...formValue,
        [name]: value
      });
    };
  
    const submitData = () =&gt; {
      console.log(formValue);
    };
  
    return (
      &lt;div&gt;
        &lt;form&gt;
          {defaultData.map((item, index) =&gt; {
            return (&lt;React.Fragment&gt;
              &lt;label&gt; Contact Mode &lt;/label&gt;
              &lt;input
                type="radio"
                name="ContactMode"
                checked={item.ContactMode == 1}
                value={1}
                onChange={(event) =&gt; handleInputChange(index, event)}
              /&gt;{" "}
              Email
              &lt;input
                type="radio"
                name="ContactMode"
                checked={item.ContactMode == 2}
                value={2}
                onChange={(event) =&gt; handleInputChange(index, event)}
              /&gt;{" "}
              Text
              &lt;input
                type="radio"
                name="ContactMode"
                checked={item.ContactMode == 3}
                value={3}
                onChange={(event) =&gt; handleInputChange(index, event)}
              /&gt;{" "}
              Both
              &lt;br /&gt;
              &lt;br /&gt;
              &lt;button type="button"&gt;
                 Save
               &lt;/button&gt;
              &lt;br /&gt;
              &lt;br /&gt;
              &lt;br /&gt;
            &lt;/React.Fragment&gt;);
          })}
        &lt;/form&gt;
      &lt;/div&gt;
    );
  };
  
  ReactDOM.render(&lt;App /&gt;, document.getElementById("root"));</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.11.0/umd/react.production.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"&gt;&lt;/script&gt;
  &lt;div id="root"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><strong>Expected output:</strong></p>
  <pre><code>Contact Mode  Email Text Both (Checked)
  
  Contact Mode  Email Text(Checked) Both
  
  Contact Mode  Email Text(Checked) Both
  </code></pre>
  <p><strong>Note:</strong> I can't modify the name attribute <code>name=&quot;ContactMode&quot;</code>.. Reason is I also have individual save button each row and on click of that save button that particular row will gets saved.. And each row should have <code>name=&quot;ContactMode&quot;</code> ..</p>
  <p><strong>Edit:</strong></p>
  <p>As my question is not clear in what I am trying to achieve, I am going to give the entire code here.</p>
  <p><strong>-&gt;</strong> I have a stepper form in which Step 2 is employment section and by default I have the values to set into the form,</p>
  <pre><code>const dynamicData = [
    {
      EmploymentID: 1,
      companyName: 'Company One',
      designation: 'Designation One',
      ContactMode: 3,
    },
    {
      EmploymentID: 2,
      companyName: 'Company two',
      designation: 'Designation One',
      ContactMode: 2,
    },
  ];
  </code></pre>
  <p><strong>-&gt;</strong> Inside <code>useEffect</code>hook I set the form value like,</p>
  <pre><code>  React.useEffect(() =&gt; {
      setExpanded(0);
      setValue((prev) =&gt; {
        const companyDetails = [...dynamicData];
        return { ...prev, companyDetails };
      });
    }, []);
  </code></pre>
  <p>Here the form values with input boxes are binded properly but the radio button value doesn't gets checked.</p>
  <p><strong>-&gt;</strong> There are two data's available but the first one will be expanded by default and whereas the second one will gets opened on click of the <code>Expand</code> button below the first one.</p>
  <p><strong>-&gt;</strong> On click of the <code>save</code> button, that particular object (<code>inputField</code>) will be console logged (testing only) along with modified data..</p>
  <p>Here the <strong>ISSUE</strong> is if we modify the data then things are working fine but the radio checked attribute alone not making the item checked.. (Checked indication is not working)..</p>
  <p>Please go to step 2 in the below given codesandbox to see the issue.. To see the second item, click on the expand button..</p>
  <p><a href="https://codesandbox.io/s/next-dynamic-testing-issue-forked-ebovz?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer"><img src="https://codesandbox.io/static/img/play-codesandbox.svg" alt="Edit next-dynamic-testing-issue (forked)" /></a></p>
  <p>Please kindly help me to set default radio button value in each row.</p>