Justin E. Samuels Justin E. Samuels - 6 months ago 21
Javascript Question

Render Method Breaking When Mapping Value Inside

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>

)

}

});

Answer

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>

        )

    }

});
Comments