title: Making first select <option> blank after mapping through array in JSX / React
body: <pre><code>  render(){
  
      let { classes } = this.props;
  
      let list = classes.map((item, index) =&gt; {
        return (
          &lt;option &gt;{item}&lt;/option&gt;
        )
      })
  
  
      return(
        &lt;div className="filter-bar"&gt;
  
          &lt;form className="sort-form"&gt;
            &lt;div className="classSelect"&gt;
              &lt;span&gt;select class&lt;/span&gt;
                &lt;select name="classSelect" onChange={this.handleClassChange}}&gt;
                  &lt;option selected="selected"  &gt;Please choose class&lt;/option&gt;
                  {list}
                &lt;/select&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      )
    }
  };
  </code></pre>
  
  <p>i want to map over an array and use each element as options in select dropdown, and also have an extra blank option which defaults until dropdown is clicked.</p>
  
  <p>at the moment, the extra  i have is available in the list, but default is always first element from array, whereas i want the default to be "Please choose your class"</p>
  
  <p>can somebody explain?</p>