title: Cant turn on switch inside Material-Table
body: <p>I am trying to create material-table with switches, that onclick changes the state of the component.</p>
  <p><a href="https://i.stack.imgur.com/gUd26.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gUd26.png" alt="how it looks" /></a>
  Here is component with table, which has state of the parent component as a props. I pass rows variable to the material table data prop. Switch is custom rendered field. Whenever I click on it, it triggers changeRow, which finds index of row in rows variable changes it and saves into new variable. ChangeRows is then called to change the state.
  The problem is, the switch is not changing. It looks like nothing is happenning, even though I can clearly see new state in console.</p>
  <pre><code>const StuffTable = ({rows, changeRows}) =&gt; {
  
  const changeRow = (oldRow, e) =&gt; {
      const changeData = {[e.target.name]: e.target.checked};
      const newRow = {...oldRow, ...changeData};
  
      console.log(oldRow, e);
  
      const index = rows.findIndex(dtaRow =&gt; dtaRow.id === oldRow.id);
      const newData = rows;
      newData[index] = newRow;
  
      console.log(newData);
      changeRows(newData);
  };
  
  return (
      &lt;Container maxWidth=&quot;lg&quot;&gt;
          &lt;Button onClick={() =&gt; { changeRow({id: 6}, { target: {name: 'borrowable', checked: true} }) }}&gt;klikni&lt;/Button&gt;
          &lt;MaterialTable
              options={{
                  actionsColumnIndex: -1,
                  search: true,
                  exportButton: true,
                  exportDelimiter: &quot;;&quot;
              }}
              actions={[
                  {
                      icon: 'edit',
                      tooltip: 'Edit Study',
                      onClick: (event, rowData) =&gt; alert(&quot;Do you want to edit?&quot;)
                  }]}
              columns={[
                  { title: &quot;Název&quot;, field: &quot;title&quot; },
                  { title: &quot;Stav&quot;, field: &quot;status&quot;, render: (data) =&gt; &lt;Chip label={data.status} color=&quot;primary&quot; avatar={&lt;Avatar src=&quot;/static/images/avatar/1.jpg&quot; /&gt;} /&gt; },
                  { title: &quot;Půjčovat&quot;, field: &quot;borrowable&quot;, render: (data, id) =&gt; (&lt;FormControlLabel control={&lt;Switch checked={data.borrowable} onChange={(e) =&gt; changeRow(data, e)} name=&quot;borrowable&quot; color=&quot;primary&quot;/&gt;} label={data.borrowable ? 'půjčovat' : 'nepůjčovat'} /&gt;) },
                  { title: &quot;Vidí všichni&quot;, field: &quot;active&quot;, render: (data, id) =&gt; (&lt;FormControlLabel control={&lt;Switch checked={data.borrowable} onChange={(e) =&gt; changeRow(data, e)} name=&quot;borrowable&quot; color=&quot;primary&quot;/&gt;} label={data.borrowable ? 'půjčovat' : 'nepůjčovat'} /&gt;) },
                  { title: &quot;Uskladněno&quot;, field: &quot;location&quot; },
              ]}
              data={rows}
              title=&quot;Moje věci&quot;
          /&gt;
      &lt;/Container&gt;
  );
  };
  
   export default StuffTable;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/aQFtr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aQFtr.png" alt="console" /></a></p>
  <p>I tried to add button, which on click changes state to empty array, and table did show nothing. But when I triggered changeRow (mockup data) with this button, result was the same - no change on the switch.</p>
  <pre><code>import React, {useEffect, useState} from 'react';
  </code></pre>
  <p>import StuffTable from &quot;../components/stuffTable&quot;;</p>
  <p>let rows = [
  {id:5, title: &quot;prošívanice&quot;, borrowable: false, surname: &quot;Baran&quot;, status: &quot;zapůjčeno&quot;, location: &quot;Praha&quot; },
  {id:6, title: &quot;prošívanice 2&quot;, borrowable: false, surname: &quot;Baran&quot;, status: &quot;zapůjčeno&quot;, location: &quot;Praha&quot; },
  {id:7, title: &quot;prošívanice 3&quot;, borrowable: false, surname: &quot;Baran&quot;, status: &quot;zapůjčeno&quot; , location: &quot;Brno&quot;}
  ];</p>
  <p>Here is Parent component</p>
  <pre><code>const MyStuffPage = () =&gt; {
  
      const [data, setData] = useState(rows);
  
      return (
          &lt;div&gt;
              &lt;StuffTable rows={data} changeRows={(data) =&gt; {setData(data); console.log(&quot;hou&quot;,data);}} /&gt;
          &lt;/div&gt;
      );
  };
  
  export default MyStuffPage;
  </code></pre>
  <p>Here is Codesandbox with this problem:
  <a href="https://codesandbox.io/s/festive-gould-i1jf7" rel="nofollow noreferrer">https://codesandbox.io/s/festive-gould-i1jf7</a></p>