title: Map <option> of a materialize css <select> with ReactJS
body: <p>I'm working in a React component that must implement a <code>&lt;select&gt;&lt;option&gt;</code>
  functionality.</p>
  
  <p>I have this:</p>
  
  <pre><code>&lt;div className="input-field col s12"&gt;
        &lt;select&gt;      
          &lt;option value="" disabled&gt;Choose your option&lt;/option&gt;
  
           {projects.map(function(projects, index) {                    
                    return (
        &lt;option value={projects.name} key={projects.name}&gt;
           {projects.name}
        &lt;/option&gt;
              )})}           
       &lt;/select&gt;
       &lt;label&gt;Project&lt;/label&gt;
       &lt;/div&gt;
  </code></pre>
  
  <p>I also have the materialize select initialized in <code>componentDidMount()</code>:</p>
  
  <pre><code>componentDidMount: function() {
  
      //initialize selects
      $(document).ready(function() {
        $('select').material_select();
      });
  }, 
   (...)
  </code></pre>
  
  <p>But when the component is displayed, it appears without <code>&lt;options&gt;</code>. When debugging the generated html in the web source code with inspection tool it has the options with display none, but when changing to block, it creates a new select after it, with no style. </p>
  
  <p>Any ideas? Thanks so much.</p>