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 구성 요소의 배열을 삽입하려고합니다. 그것은 지루하지만 HTML로 출력되지는 않습니다.

요소 배열을에 전달해야합니다 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;