title: React js Material UI Switch Component in loop
body: <p>I am trying to make the attendance system and I am using switch component from React material UI (ref: <a href="https://material-ui.com/api/switch/" rel="nofollow noreferrer">https://material-ui.com/api/switch/</a>).</p>
  
  <p>How can I loop switch component in the loop so that each switch button toggle acts like each table rows? Below is my code block. Any Help? Currently when I toggle one switch then all the switch inside the loops are auto toggled.</p>
  
  <pre><code>constructor(props) {
      super(props);
      this.state = {
          checkedB: false,
      }
      this.handleClassChange = this.handleClassChange.bind(this);
  }
  
  handleChange = name =&gt; event =&gt; {
      this.setState({ [name]: event.target.checked });
  };
  
   {
  
    this.state.students.map((post, i) =&gt; (
    &lt;TableRow key={i} className="tblFont"&gt;
    &lt;TableCell scope="row"&gt;
    {post.ROLLNO}
    &lt;/TableCell&gt;
    &lt;TableCell&gt;
    {post.STNAME}
    &lt;/TableCell&gt;
    &lt;TableCell&gt;
        &lt;Switch key={this.state[i]}
           checked={this.state.i}
           onChange={this.handleChange('checkedB')}
           value="checkedB"
           color="primary"
        /&gt;
    &lt;/TableCell&gt;
  &lt;/TableRow&gt;
      ))
  }
  </code></pre>