title: Populate 2nd dropdown based on selection from 1st dropdown in React.Js
body: <p>I am learning react and struggling to get a second dropdown to populate based on which option is clicked from first dropdown.</p>
  
  <p>I have included my code below.  </p>
  
  <p>I think the issue is where I try to set <code>this.state.selected = param.tableName</code>.  I don't think that will work, but I'm not sure what to use instead.  </p>
  
  <p>I need an <code>onClick</code> event to change the <code>this.state.selected</code> variable to the option that is selected I think, and then check when <code>tableName === selected</code>.  I will also include my JSON below so the context is more clear.</p>
  
  <pre><code>import React from 'react';
  import axios from 'axios';
  class Search extends React.Component {
      constructor(props) {
          super(props)
          this.state = {
              params: [],
              columnParams: [],
              selected: ''
          }
      }
  
      componentWillMount() {
          axios.get('http://localhost:3010/api/schema')
          .then( response =&gt; {
              this.setState({params: response.data})
          })
      }
      render() {
          return (
              &lt;div className="Search"&gt;
                  &lt;select&gt;{this.state.params.map((param, i) =&gt;
                      &lt;option key={i} onClick={this.setState(this.state.selected ={param.tableName})}&gt;
                          {param.tableName}
                      &lt;/option&gt;)}
                  &lt;/select&gt;
                  &lt;select&gt;
                    {
                      this.state.params
                        .filter(({tableName}) =&gt; tableName === selected)
                        .map(({columns}) =&gt; columns.map((col) =&gt;&lt;option&gt;{col}&lt;/option&gt;))}
  
  [
  {
  "tableName": "customer",
  "columns": [
  "customerid",
  "title",
  "prefix",
  "firstname",
  "lastname",
  "suffix",
  "phone",
  "email"
  ]
  },
  {
  "tableName": "product",
  "columns": [
  "productid",
  "name",
  "color",
  "price",
  "productadjective",
  "productmaterial"
  ]
  },
  </code></pre>