JSX'te foreach tepki verin

REACT yoluyla çıktısını almak istediğim bir nesne var

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

ve benim tepki bileşenim (azaltma), başka bir bileşen

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;

Yukarıdaki kod parçacığından da görebileceğiniz gibi, yanıtlar dizisini props içinde kullanarak yanıt bileşeninin bir dizisini eklemeye çalışıyorum.

Bir eleman dizisine geçmeniz gerekiyor jsx. Sorun şu ki forEach, hiçbir şey döndürmez (yani geri döner undefined). Böyle mapbir dizi döndürdüğü için daha iyi kullanın

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;