title: How to deal with multiple <select> dropdown menus in the same class component that use the same state to pass a value to redux?
body: <p>This code works fine if the user selects something from each  dropdown menu, but if they forget to make a selection, it will just use the value selected from the previous dropdown menu. Also if they don't make any selection at all and submit, it will obviously submit the default value stored in the state which is "0". </p>
  
  <p>Anyone happen to have a workaround for this? Thanks.</p>
  
  <pre><code>export class Content extends Component {
  
    constructor(props){
      super(props)
      this.state = {
        selectedOption: 0
      }
    }
  
    handleOptionChange = e =&gt; {
      this.setState({
        selectedOption: e.target.value
      })
    }
  
    handleSubmit = e =&gt; {
      e.preventDefault()
    }
  
  
    render() {
      let snowboardItems = this.props.snowboards.map((board,index) =&gt; {
        return &lt;div&gt;&lt;form onSubmit={this.handleSubmit}&gt;
               &lt;li key={index} className="list_item"&gt;
               &lt;div className="content_div1"&gt;
               &lt;h3&gt;{board.name}&lt;/h3&gt;
               &lt;h3&gt;$ {board.price}&lt;/h3&gt;
               &lt;h4&gt;{board.terrain}&lt;/h4&gt; 
               &lt;h4&gt;Shape: {board.shape}&lt;/h4&gt;
               &lt;p&gt;Board Length:&lt;/p&gt;    
        &lt;select value={this.state.selectedOption} onChange={this.handleOptionChange}&gt;
        {board.length.map((item, index) =&gt;     
              &lt;option value={item} key={index}&gt;{item}&lt;/option&gt;     
        )}
        &lt;/select&gt; cm
        &lt;/div&gt;
        &lt;div className="content_div2"&gt;
        &lt;button className="content_button" type="submit" onClick={() =&gt; this.props.addToCart({board}, this.state.selectedOption)}&gt;Add to Cart&lt;/button&gt;
        &lt;img className="image" src={board.imageurl} /&gt;
        &lt;/div&gt;
        &lt;/li&gt;
        &lt;/form&gt;
        &lt;/div&gt;
  
      })
  </code></pre>