title: how to maintain the state for each radio button in a table view - react
body: <p>I am having the below html table view.
  <a href="https://i.stack.imgur.com/2IdXG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2IdXG.png" alt="enter image description here" /></a>
  Using React, I am trying to change the <code>checked</code> value when a user change any radio button in a row.</p>
  <p>I am trying this onchange function but its not working</p>
  <pre><code>changeStatus(e)
  {
    if(e.target.value === 'on')
    {
      e.target.checked = true
    }
    else
    {
      e.target.checked = false
    }
    console.log(e.target.value + e.target.checked)
  }
  </code></pre>
  <p>Render function</p>
  <pre><code>    {records.length&gt;0 &amp;&amp; records.map((row,i) =&gt; (
                // this.state.radio_val[row.id] = row.status;
              &lt;tr key={i}&gt;
                &lt;td&gt;{i+1}&lt;/td&gt;
                &lt;td&gt;{row.name}&lt;/td&gt;
                &lt;td&gt;          
                    &lt;div className=&quot;form-check form-switch&quot;&gt;
                    &lt;input className=&quot;form-check-input&quot; type=&quot;checkbox&quot;  onChange={this.changeStatus.bind(this)} /&gt;
                    {/* &lt;label class=&quot;form-check-label&quot; for=&quot;flexSwitchCheckChecked&quot;&gt;Checked switch checkbox input&lt;/label&gt; */}
                    &lt;/div&gt;
                &lt;/td&gt;
                &lt;td&gt;
                &lt;Link to={&quot;/brand/&quot;+row.slug}&gt;
                &lt;button type=&quot;button&quot; className=&quot;btn btn-sm btn-info active&quot;&gt; &lt;i className=&quot;fas fa-edit&quot;&gt;&lt;/i &gt; Edit&lt;/button&gt;
                &lt;/Link&gt;
                &lt;/td&gt;
              &lt;/tr&gt;
     ))}
  </code></pre>
  <p>Please guide me to maintain the state for the rows of radio buttons. I want to change the radio button state while changing the value.</p>