title: Troubles with React.useState()
body: <p>I don't understand why a new row doesn't appear after I press the button. Output through console.log shows that row was added to tables var correctly. Other question is why I can see that new row was added to table even in output of console.log(tables) commented with // 1? This output happens before I add the row.</p>
  
  <p>Code got messed up after pasting here, hope it is still readable.</p>
  
  <pre><code>function Development() {
    const classes = useStyles();
  
    const [tables, setTables] = React.useState([
      {
        tableName: 'Table1',
        rows: [
          {
            colId: 1,
            primaryKey: 11,
            colName: 'Name1',
            datatype: 'Type1',
            length: 111,
            nulls: 'n1'
          }, 
          {
            colId: 2,
            primaryKey: 22,
            colName: 'Name2',
            datatype: 'Type2',
            length: 222,
            nulls: 'n2'          
          }
        ]
      }, 
      {
        tableName: 'Table2',
        rows: [
          {
            colId: 3,
            primaryKey: 33,
            colName: 'Name3',
            datatype: 'Type3',
            length: 333,
            nulls: 'n3'
          }, 
          {
            colId: 4,
            primaryKey: 44,
            colName: 'Name4',
            datatype: 'Type4',
            length: 444,
            nulls: 'n4'          
          }
        ]
      }
    ]);
  
    const addRow = () =&gt; {
      console.log(tables); // 1
      var tempList = tables;
  
      tempList.some((table) =&gt; {
        if (table.tableName === "Table1") {
         table.rows.push({colId: 5, primaryKey: 55, colName: 'Name5', datatype: 'Type5', length: 555, 
         nulls: 'n5'});
        }
      });
      setTables(tempList);
   }
  
  
    return (
      &lt;div&gt;
      &lt;Card className={[classes.mainCard, classes.card].join(' ')}&gt;
        {tables.map((tb) =&gt; {
          var rows = tb.rows.map(function(row) {
            return (
                &lt;TableRow key={row.colId}&gt;
                  &lt;TableCell component="th" scope="row"&gt;
                    {row.colId}
                  &lt;/TableCell&gt;
                  &lt;TableCell&gt;{row.primaryKey}&lt;/TableCell&gt;
                  &lt;TableCell&gt;{row.colName}&lt;/TableCell&gt;
                  &lt;TableCell&gt;{row.datatype}&lt;/TableCell&gt;
                  &lt;TableCell&gt;{row.length}&lt;/TableCell&gt;
                  &lt;TableCell&gt;{row.nulls}&lt;/TableCell&gt;
                &lt;/TableRow&gt;
            )
          });
  
      return (
        &lt;TableContainer component={Paper}&gt;{tb.tableName}
          &lt;Table className={classes.table} aria-label="simple table"&gt;
            &lt;TableHead&gt;
              &lt;TableRow&gt;
                &lt;TableCell&gt;COL ID&lt;/TableCell&gt;
                &lt;TableCell&gt;PRIMARY KEY&lt;/TableCell&gt;
                &lt;TableCell&gt;COLNAME&lt;/TableCell&gt;
                &lt;TableCell&gt;DATATYPE&lt;/TableCell&gt;
                &lt;TableCell&gt;LENGTH&lt;/TableCell&gt;
                &lt;TableCell&gt;NULLS&lt;/TableCell&gt;
              &lt;/TableRow&gt;
            &lt;/TableHead&gt;
            &lt;TableBody&gt;
              {rows}
            &lt;/TableBody&gt;
          &lt;/Table&gt;
  
        &lt;/TableContainer&gt; 
      )
    })} 
  &lt;/Card&gt;
  &lt;Button className={classes.btn2} color="primary" variant="outlined" onClick={addRow}&gt;Add Row&lt;/Button&gt;
  &lt;/div&gt;
    );
  }
  </code></pre>