I have a bit of an interesting question, that arose in some experimental things I'm doing right now.
I'm making a table that has 4 values. 2 of those are inputs that are meant to be changed. At the end of the row are a "Submit" and "Cancel" buttons. The table is generated via an array. Each time there's a new object in the array, a new table row is generated.
At the moment, my idea to solve this is to create another array in state with reference of this.state.tableValues .
Each time I get a new array, the tableValues is overwritten with the new array so it looks something like:
this.state.tableValues.<index>.<value1>
this.state.tableValues.<index>.<value2>
The 2 values are stored for the onChange handling as text is typed into the 2 input fields. The idea is to then give each button a reference on Index, and the submit/cancel to use the index value to either submit array data including stuff that isn't changed (like internal ID), or to find the default value on cancel.
Is this the best way to do it? My concern is that it will start slowing down once the source array starts getting more data in it, as well as storing this stuff in memory/state.