title: How to update value of a specific key in array of objects in react state?
body: <p>I'm creating a user role management form like this:</p>
  
  <p><img src="https://i.stack.imgur.com/Oyb8D.png" alt="User role management form"></p>
  
  <p>Whenever the user checks or unchecks a permission, I'm trying to put that in the state so that I can send it to my backend server and update the DB.</p>
  
  <p>I'm storing all the rows info in the state in <code>componentWillReceiveProps</code>:</p>
  
  <pre><code>componentWillReceiveProps(nextProps){
          if(nextProps.users.items){
              this.setState({
                  userobj : nextProps.users.items['users']
              });
              const userarr = []
              nextProps.users.items['users'].map((i) =&gt; {     
  
                  userarr.push({"employeeid" : i['employeeid'] , "isadmin": i['isadmin'], "isreports" : i['isreports'], "ischarts": i['ischarts'], "ischathistory": i['ischathistory']})            
              });
              this.setState({"list" : userarr});
          }
      }
  </code></pre>
  
  <p>Now the state is:</p>
  
  <pre><code>list: Object(4)
      ​​
      0: Object { employeeid: "12345", isadmin: false, isreports: true, …  }
      ​​
      1: Object { employeeid: "12346", isadmin: false, isreports: true, … }
      ​​
      2: Object { employeeid: "12347", isadmin: false, isreports: true, … }
      ​​
      3: {…}
  </code></pre>
  
  <p>There is an <code>onClick</code> event for each checkbox:</p>
  
  <pre><code>&lt;Table.Td&gt;{rows['isadmin'] ? &lt;Checkbox  id={rows['employeeid']} name="isadmin" defaultChecked onChange={this.handleChange}&gt;&lt;/Checkbox&gt; : &lt;Checkbox  id={rows['employeeid']} name="isadmin" onChange={this.handleChange}&gt;&lt;/Checkbox&gt;}&lt;/Table.Td&gt;
  </code></pre>
  
  <p>And this is the code for <code>handleChange</code>: </p>
  
  <pre><code>handleChange(id) {
          const checked = id.target.checked;
          const empid = id.target.id;
          const name = id.target.name;
  
          this.setState(prevState =&gt; ({
              list: {
                ...prevState.list,
                [this.getIndex(empid, this.state.list, 'employeeid')]: {
                  ...prevState[this.getIndex(empid, this.state.list, 'employeeid')],
                  [name] : checked
                },
              }
          }));
      }
  </code></pre>
  
  <p>The result is:</p>
  
  <pre><code>list: Object(4)
  ​​
  0: Object { isadmin: true }
  ​​
  1: Object { employeeid: "12346", isadmin: false, isreports: true, … }
  ​​
  2: Object { employeeid: "12347", isadmin: false, isreports: true, … }
  ​​
  3: {…}
  </code></pre>
  
  <p>What I need to achieve is:</p>
  
  <pre><code>list: Object(4)
  ​​
  0: Object { employeeid: "12345", isadmin: true, isreports: true, …  }
  ​​
  1: Object { employeeid: "12346", isadmin: false, isreports: true, … }
  ​​
  2: Object { employeeid: "12347", isadmin: false, isreports: true, … }
  ​​
  3: {…}
  </code></pre>
  
  <p>I'm new to React and Redux. Any help is appreciated. Thanks in advance. ☺</p>