react-table cells containing inputs whose values are defined in state. Inputs do not change when state is updated
I have a form constructed from a react-table component. The columns are known, but rows come from an API. The data for it is populated like so (in the callback from the API call)
const columns = [ { Header: "Foo", accessor: "foo" }, { Header: "Bar", accessor: "bar" }, ]; const row_data = data.map((x, i) => ({ foo: x, bar: ( <FormControl key={i} value={this.state[x]} onChange={(e) => this.setState({ [x]: e.target.value, }) } /> ), })); this.setState({ columns: columns, row_data: row_data, }); This successfully renders a table that:
- contains a row for every element of data
- contains an input in every row
- the inputs correctly update
this.state[x]when they are changed
This works fine.
The problem, is that the value prop seems not to update. If I change the value of this.state[x] (not using the input), the contents of the input does not change.
My guess as to why this would be, is that the value prop is evaluated before being saved in the state, but I don’t know how to solve the problem.
I have tried setting this.state[x] to null just before generating the form inputs, hoping that the existence of the key in the state might make a difference, but it did not.
