React foreach trong JSX

Tôi có một đối tượng mà tôi muốn xuất qua REACT

question = {
    text: "Is this a good question?",
    answers: [
       "Yes",
       "No",
       "I don't know"
    ]
} 

và thành phần phản ứng của tôi (bị cắt giảm), là một thành phần khác

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;

như bạn có thể thấy từ đoạn trích ở trên, tôi đang cố gắng chèn một mảng của thành phần Câu trả lời bằng cách sử dụng mảng Câu trả lời trong đạo cụ, nó sẽ hiển thị nhưng không được xuất thành HTML.

Bạn cần chuyển một mảng phần tử tới jsx. Vấn đề là forEachkhông trả về bất cứ thứ gì (tức là nó trả về undefined). Vì vậy, sử dụng tốt hơn mapvì nó trả về một mảng như thế này

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;