title: ReactJS - Setting row dropdown in a table
body: <p>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:</p>
  
  <pre><code>&lt;TableBody
          displayRowCheckbox={this.state.showCheckboxes}
          deselectOnClickaway={this.state.deselectOnClickaway}
          showRowHover={this.state.showRowHover}
          stripedRows={this.state.stripedRows}
        &gt;
          {tableData.map( (row, index) =&gt; (
            &lt;TableRow key={index} selected={row.selected}&gt;
              &lt;TableRowColumn&gt;{index}&lt;/TableRowColumn&gt;
              &lt;TableRowColumn&gt;
                  &lt;SelectField key={index} value={row.clientId} onChange={this.handleRowChange}&gt;
                  {clientsDropdownData.map((row, index) =&gt;(
                      &lt;MenuItem key={row.val} value={row.val} primaryText={row.name} /&gt;
  
                  ))}
                  &lt;/SelectField&gt;
              &lt;/TableRowColumn&gt;
              &lt;TableRowColumn&gt;{row.name}&lt;/TableRowColumn&gt;
              &lt;TableRowColumn&gt;{row.status}&lt;/TableRowColumn&gt;
            &lt;/TableRow&gt;
            ))}
        &lt;/TableBody&gt;
  </code></pre>
  
  <p>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?</p>
  
  <p>This is what I have for onChange of SelectField:</p>
  
  <pre><code>handleRowChange = (event, index, rowValue) =&gt; {
        //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.
    }
  </code></pre>