Map <option> of a materialize css <select> with ReactJS

Question

I'm working in a React component that must implement a <select><option> functionality.

I have this:

<div className="input-field col s12">
      <select>      
        <option value="" disabled>Choose your option</option>

         {projects.map(function(projects, index) {                    
                  return (
      <option value={projects.name} key={projects.name}>
         {projects.name}
      </option>
            )})}           
     </select>
     <label>Project</label>
     </div>

I also have the materialize select initialized in componentDidMount():

componentDidMount: function() {

    //initialize selects
    $(document).ready(function() {
      $('select').material_select();
    });
}, 
 (...)

But when the component is displayed, it appears without <options>. 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.

Any ideas? Thanks so much.

Is this your actual code? You can't just say return in the middle of jsx like that.. looks like you're missing map? — azium
– azium, Commented Jan 28, 2016 at 15:33
I'm seeing that is a problem of the state recovering the data, rather than the materializecss (what I thought at first because of the strange behaviour). — AlexAcc
– AlexAcc, Commented Jan 28, 2016 at 15:52

AlexAcc · Accepted Answer · 2016-01-28 16:12:28Z

1

I discovered the problem!!!

$(document).ready(function() {
          $('select').material_select();
        });

MUST be executed, when the select is displayed, not only when the component is mounted. So I didn't need to execute the initialization function of the select in the componentDidMount() phase function, but in render() function, because every time the state changed (and it changes because it's populated with json data), I must execute the jquery function above.

Solved! Hope it helps any other one.

answered Jan 28, 2016 at 16:12

AlexAcc

6313 gold badges13 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Map <option> of a materialize css <select> with ReactJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related