onChange in react not working as I would expect

Question

given this datatype for tables an array of object of objects:

[
    {
        "1": {
            "1": "Item s ",
            "2": "Manufacturer ",
            "3": "Mir s ",
            "4": "Decoription ",
            "5": "Contents ",
            "6": "UOM ",
            "7": "Total Ship Total Qty ",
            "8": "% of Purohasec ",
            "9": "Involoe Count ",
            "10": "K Brand "
        },
        "2": {
            "1": "fdsa ",
            "2": "fdsa fdsa ",
            "3": "16-fsd ",
            "4": "fds fdsa TW fsda",
            "5": "100 ",
            "6": "B) ",
            "7": "6 ",
            "8": "0.17 ",
            "9": "3 ",
            "10": ""
        },
      }, 
    ....
]

I have this component that displays a "row" 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.

const [tablesCopy, setTablesCopy] = useState<any>({});

...

const InvRow = ({ rowTarget, clearEditRow, table, cellChange }: { rowTarget: string, clearEditRow: Function, table: any; cellChange: Function; }) => {
  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(<tr>
        <td>{labels[key]}</td>
        <td><Input type="text" value={values[key]} name={name} id={name} onChange={(e) => cellChange(e)} /></td>
      </tr>);
    }
  }

  return (
    <>
      <Table>{editRow}</Table>
      <div>
        <Button onClick={(e) => clearEditRow(e)} color="primary" size="lg">Close</Button>
      </div>
    </>

  );
};

my on cellChange method is the following, and it is fired correctly with expected inputs:

  const cellChange = (e: React.BaseSyntheticEvent) => {

    const tt = tableTarget(e.target.id);
    console.log("cellChange -> tt", tt);
    tablesCopy[tt.table][tt.row][tt.cell] = e.target.value;
    setTablesCopy(tablesCopy);

  };

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.

Any suggestion to implement this onChange better, or a differnt tact i should be taking?

edit: adding my useEffect initialization:

  useEffect(() => {
    const fetchData = async () => {
      const path = "/tables.json";
      const response = await fetch(path);
      const tables: any = await response.json();
      setTablesOrig(tables);
      setTablesCopy({ ...tables });
      const tableKeys = Object.keys(tablesCopy);
      setNumOfTables(tableKeys.length);

    };
    fetchData();
  }, []);

You're mutating the `tablesCopy` state object before calling `setTableCopy` — pilchard, Nov 04 '20 at 15:48
React sees that `setTablesCopy` received same instance it already stored and does nothing. You should create copy of your object.. — Alexander Burov, Nov 04 '20 at 15:50
@pilchard sorry, in my useEffect i am setting it initially: `setTablesOrig(tables); setTablesCopy({ ...tables });` — Pompey Magnus, Nov 04 '20 at 15:51
You can pass a callback to `setState` – `setTablesCopy(prevTablesCopy => prevTablesCopy[tt.table][tt.row][tt.cell] = e.target.value);` — pilchard, Nov 04 '20 at 16:07
@PompeyMagnus Firstly, in your initialization code you're creating object from array, so it was `[{..}, {..}]` but became `{0: {..}, 1: {..}}`. Secondly, you it's just shallow copy (you creating new wrapping object, but all nested instances still same), but you need to create a deep copy. Thirdly, you have create a copy on every `setTablesCopy` call, not just initial one. — Alexander Burov, Nov 04 '20 at 16:08

Alexander Burov · Accepted Answer · 2020-11-04T16:19:38.503

You should clone your data object. If you're using just string, number and bool in your table, this should work just fine:

const cellChange = (e: React.BaseSyntheticEvent) => {

    const tt = tableTarget(e.target.id);
    console.log("cellChange -> tt", tt);
    var tables = JSON.parse(JSON.stringify(tablesCopy)); // <- clone
    tables[tt.table][tt.row][tt.cell] = e.target.value;
    setTablesCopy(tables);

  };

see other options of deep object clone here: What is the most efficient way to deep clone an object in JavaScript?

UPD: As mentioned in comments you could use spread syntax to copy, however, it's not enought to do {...tablesCopy} but you should also clone that table, row and cell you're changing. So right way would be as follows:

const cellChange = (e: React.BaseSyntheticEvent) => {

    const tt = tableTarget(e.target.id);
    console.log("cellChange -> tt", tt);

    var tables = {
        ...tablesCopy,
        [tt.table]: {
            ...tablesCopy[tt.table],
            [tt.row]: {
                ...tablesCopy[tt.table][tt.row],
                [tt.cell]: e.target.value
            }
        }
    };
    setTablesCopy(tables);

  };

i applied this to the initial set using lodash: `setTablesCopy(_.cloneDeep(tables));` would i still need to clone it in the cellChange method? @AlexnderBurov — Pompey Magnus, Nov 04 '20 at 19:44
@PompeyMagnus yes, that's the point. React stores `tablesCopy` and when you're calling `setTablesCopy` it checks whether it's the same instance it already has. If so, it just ignores changes, otherwise it will re-render your component. P.S. Actually, it's not necessary to clone it in your initial setup. — Alexander Burov, Nov 04 '20 at 20:58

onChange in react not working as I would expect

1 Answers1