Dynamically generating JSX in React

Question

I want to generate options from an array for a select form. This is inside a React component's render method and being transpiled with JSX.

render: function(){
    return(
        <div className="control-group">
            <select id="select-food" placeholder="Pick a food...">
                <option value="">select a food</option>
                {Object.keys(this.state.foods).forEach((food) => {
                    return (<option value={food}>{food}</option>);
                })}
            </select>
        </div>
    );
}

I can output the foods inside the forEach loop to the console with console.log() just fine, but the HTML just isn't getting generated. What am I missing here to get it to work?

Answer 1

You cannot return from inside a forEach loop. You'll want to use .map() instead, which will return a new array. More info about map here.

render: function() {
  return (
    <div className="control-group">
      <select id="select-food" placeholder="Pick a food...">
        <option value="">select a food</option>
        {Object.keys(this.state.foods).map((food) => {
          return (<option value={food}>{food}</option>);
        })}
      </select>
    </div>
  );
}