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?

jaybee · Accepted Answer · 2016-06-14 21:58:16Z

9

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>
  );
}

edited Jun 14, 2016 at 21:58

answered Jun 14, 2016 at 21:54

jaybee

2,30016 silver badges21 bronze badges

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

Comments

jaybee · Accepted Answer · 2016-06-14 21:58:39Z

use map or helper function check link https://egghead.io/lessons/react-dynamically-generated-components. good place to start

render: function(){
let options = ['book', 'cat', 'dog'];

    return(
        <div className="control-group">
            <select id="select-food" placeholder="Pick a food...">
               {options.map(food => <option key={id} value={food}>{food}</option>)}
            </select>
        </div>
    );
}

another solution in my demo

renderRepository() {
let repository = this.props.repositories.find((repo)=>repo.name === this.props.params.
repo_name);
let stars = [];
for (var i = 0; i < repository.stargazers_count; i++) {
stars.push('');
}
return(
<div>
<h2>{repository.name}</h2>
<p>{repository.description}</p>
<span>{stars}</span>
</div>
);
}
render() {
if(this.props.repositories.length > 0 ){
return this.renderRepository();
} else {
return <h4>Loading...</h4>;
}
}
}

Collectives™ on Stack Overflow

Dynamically generating JSX in React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related