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:

<TableBody
        displayRowCheckbox={this.state.showCheckboxes}
        deselectOnClickaway={this.state.deselectOnClickaway}
        showRowHover={this.state.showRowHover}
        stripedRows={this.state.stripedRows}
      >
        {tableData.map( (row, index) => (
          <TableRow key={index} selected={row.selected}>
            <TableRowColumn>{index}</TableRowColumn>
            <TableRowColumn>
                <SelectField key={index} value={row.clientId} onChange={this.handleRowChange}>
                {clientsDropdownData.map((row, index) =>(
                    <MenuItem key={row.val} value={row.val} primaryText={row.name} />

                ))}
                </SelectField>
            </TableRowColumn>
            <TableRowColumn>{row.name}</TableRowColumn>
            <TableRowColumn>{row.status}</TableRowColumn>
          </TableRow>
          ))}
      </TableBody>

Initial value of the dropdowns of all the rows are set properly based on clientId value from data supplied to the table. On change of selected row's dropdown, I want to change supplied data's clientId property. How can I achieve it? React is all about states. But how can I manage multiple and dynamic states?

This is what I have for onChange of SelectField:

handleRowChange = (event, index, rowValue) => {
      //this.setState({rowValue}); how to set state here?
      tableData[index]['clientId'] = rowValue; //this doesn't work. But this is what I want. I want to update tableData and also update the UI.
  }

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