web-dev-qa-db-ja.com

React JSXのforeach

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の配列を挿入しようとしています。

reactjsreact-props
47
michael

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;
95
Prakash Sharma