Deepak Deepak - 1 year ago 122
React JSX Question

ReactJS - Setting row dropdown in a table

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:

{ (row, index) => (
<TableRow key={index} selected={row.selected}>
<SelectField key={index} value={row.clientId} onChange={this.handleRowChange}>
{, index) =>(
<MenuItem key={row.val} value={row.val} primaryText={} />


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.

Thanks for the help..

Answer Source

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:

{ (row, index) => (


{ (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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download