Динамическое генерирование JSX в реакторе

Question

Я хочу сгенерировать опции из массива для выбранной формы. Это внутри метода рендеринга компонента React и передается с помощью 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> 
    ); 
} 

я могу выводить продукты внутри forEach петли на консоль с console.log() просто отлично, но HTML просто не получает генерируется. Что мне здесь не хватает, чтобы заставить его работать?

Answer 1

Вы не можете вернуться из внутри forEach цикла. Вместо этого вы захотите использовать .map(), который вернет новый массив. Более подробная информация о maphere.

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

Answer 2

использование карта или вспомогательный функция проверка link https://egghead.io/lessons/react-dynamically-generated-components. хорошее место, чтобы начать

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

другое решение в моей демо

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