1

I have a component (a dropdown list), which should populate the list based on an array which was passed in from another component as the "classes" prop. To make it as efficient as possible, I'm attempting to use Object.keys and Array.prototype.map methods to loop through my array, populate the list, and render. But, whenever I added this component, it causes my entire application to not render at all. I've listed my render method below.

Render Method:

export default React.createClass({

    change: function(){
        console.log(this.props.classes);
    },

    render: function(){

        return(
            <div>

             <select onChange = {this.change}>
             {
                Object.keys(this.props.classes).map(value, key =>{

                return <option key = {key}>{value}</option>
                }
             )}
              </select>
            </div>

        )

    }

});
Justin E. Samuels
  • 867
  • 10
  • 28
  • could you post an example of the `classes` object? Also, looping over an object's keys gives you the keys in random order. – wintvelt May 14 '16 at 21:12

2 Answers2

2

The callback parameters need extra parenthesis I think:

export default React.createClass({

    change: function(){
        console.log(this.props.classes);
    },

    render: function(){

        return(
            <div>

             <select onChange = {this.change}>
             {
                Object.keys(this.props.classes).map((value, key) =>{

                return <option key = {key}>{value}</option>
                }
             )}
              </select>
            </div>

        )

    }

});
Damien Leroux
  • 11,177
  • 7
  • 43
  • 57
1

When you use ES2015 arrow functions and you have more then one parameter, you need to put parentheses around the parameters, like this: 

Object.keys(this.props.classes).map((value, key) => {
   return <option key={key}>{value}</option>
 }

You can omit the parentheses only when you have one parameter.

Július Retzer
  • 1,055
  • 1
  • 10
  • 25