REACT経由で出力したいオブジェクトがあります
question = {
text: "Is this a good question?",
answers: [
"Yes",
"No",
"I don't know"
]
}
そして、私の反応コンポーネント(カットダウン)は、別のコンポーネントです
class QuestionSet extends Component {
render(){
<div className="container">
<h1>{this.props.question.text}</h1>
{this.props.question.answers.forEach(answer => {
console.log("Entered"); //This does ifre
<Answer answer={answer} /> //THIS DOES NOT WORK
})}
}
export default QuestionSet;
上記のスニペットからわかるように、propsでAnswers配列を使用してコンポーネントAnswerの配列を挿入しようとしています。
jsx
に要素の配列を渡す必要があります。問題は、forEach
が何も返さないことです(つまり、undefined
を返します)。このように配列を返すので、map
を使用する方が良い
class QuestionSet extends Component {
render(){
<div className="container">
<h1>{this.props.question.text}</h1>
{this.props.question.answers.map((answer, i) => {
console.log("Entered");
// Return the element. Also pass key
return (<Answer key={i} answer={answer} />)
})}
}
export default QuestionSet;