title: onChange in react not working as I would expect
body: <p>given this datatype for tables an array of object of objects:</p>
  <pre><code>[
      {
          &quot;1&quot;: {
              &quot;1&quot;: &quot;Item s &quot;,
              &quot;2&quot;: &quot;Manufacturer &quot;,
              &quot;3&quot;: &quot;Mir s &quot;,
              &quot;4&quot;: &quot;Decoription &quot;,
              &quot;5&quot;: &quot;Contents &quot;,
              &quot;6&quot;: &quot;UOM &quot;,
              &quot;7&quot;: &quot;Total Ship Total Qty &quot;,
              &quot;8&quot;: &quot;% of Purohasec &quot;,
              &quot;9&quot;: &quot;Involoe Count &quot;,
              &quot;10&quot;: &quot;K Brand &quot;
          },
          &quot;2&quot;: {
              &quot;1&quot;: &quot;fdsa &quot;,
              &quot;2&quot;: &quot;fdsa fdsa &quot;,
              &quot;3&quot;: &quot;16-fsd &quot;,
              &quot;4&quot;: &quot;fds fdsa TW fsda&quot;,
              &quot;5&quot;: &quot;100 &quot;,
              &quot;6&quot;: &quot;B) &quot;,
              &quot;7&quot;: &quot;6 &quot;,
              &quot;8&quot;: &quot;0.17 &quot;,
              &quot;9&quot;: &quot;3 &quot;,
              &quot;10&quot;: &quot;&quot;
          },
        }, 
      ....
  ]
  </code></pre>
  <p>I have this component that displays a &quot;row&quot; to be edited.  I am displaying the form and table backed by the json data (above), thinking I work with the table and set it in state, the the view re-renders and gives me the change.  The datatype above will be in the above format, but the headers, number of tables, fields could all change from run to run.  Also I don't have much control over the data type.  The table being passed as a prop is tablesCopy you see below in the cellChange.</p>
  <pre><code>const [tablesCopy, setTablesCopy] = useState&lt;any&gt;({});
  </code></pre>
  <p>...</p>
  <pre><code>const InvRow = ({ rowTarget, clearEditRow, table, cellChange }: { rowTarget: string, clearEditRow: Function, table: any; cellChange: Function; }) =&gt; {
    const tt = tableTarget(rowTarget);
  
    const editRow = [];
  
    if (tt) {
      const labels = table[tt.table][1];
      const values = table[tt.table][tt.row];
  
      const keys = Object.keys(labels);
      for (let key of keys) {
        const name = `t_${tt.table}_r_${tt.row}_c_${key}`;
        editRow.push(&lt;tr&gt;
          &lt;td&gt;{labels[key]}&lt;/td&gt;
          &lt;td&gt;&lt;Input type=&quot;text&quot; value={values[key]} name={name} id={name} onChange={(e) =&gt; cellChange(e)} /&gt;&lt;/td&gt;
        &lt;/tr&gt;);
      }
    }
  
    return (
      &lt;&gt;
        &lt;Table&gt;{editRow}&lt;/Table&gt;
        &lt;div&gt;
          &lt;Button onClick={(e) =&gt; clearEditRow(e)} color=&quot;primary&quot; size=&quot;lg&quot;&gt;Close&lt;/Button&gt;
        &lt;/div&gt;
      &lt;/&gt;
  
    );
  };
  </code></pre>
  <p>my on cellChange method is the following, and it is fired correctly with expected inputs:</p>
  <pre><code>  const cellChange = (e: React.BaseSyntheticEvent) =&gt; {
  
      const tt = tableTarget(e.target.id);
      console.log(&quot;cellChange -&gt; tt&quot;, tt);
      tablesCopy[tt.table][tt.row][tt.cell] = e.target.value;
      setTablesCopy(tablesCopy);
  
    };
  </code></pre>
  <p>however, in the display, the old values are not getting replaced by the onChange event, though in the console, i can see the event getting fired with the correct values.</p>
  <p>Any suggestion to implement this onChange better, or a differnt tact i should be taking?</p>
  <p>edit: adding my useEffect initialization:</p>
  <pre><code>  useEffect(() =&gt; {
      const fetchData = async () =&gt; {
        const path = &quot;/tables.json&quot;;
        const response = await fetch(path);
        const tables: any = await response.json();
        setTablesOrig(tables);
        setTablesCopy({ ...tables });
        const tableKeys = Object.keys(tablesCopy);
        setNumOfTables(tableKeys.length);
  
      };
      fetchData();
    }, []);
  </code></pre>