ReactJS - Setting row dropdown in a table

Question

I\'m using a material ui Table. One of the column has SelectField component, which is a dropdown with few items to choose from. Sample code here:

Answer 1

You can use an attribute tableData in your state. When you want to update it (the table data and the Table view) you can just change your table data in the state with:

handleRowChange = (event, index, rowValue) => {
      let newTableData = this.state.tableData
      newTableData[index]['clientId'] = rowValue;
      this.setState({tableData: newTableData}); //New table set and view updated
  }

And use directly your state's table replacing:

{tableData.map( (row, index) => (

with

{this.state.tableData.map( (row, index) => (

This is why React's state is actually usfeul. You can put whatever you want there and, when you update it, the view will be re-rendered acordingly. If your state gets more complex you can use alternatives like Redux