0

I'm trying to make a multiple choice quiz game. In this component I am rendering a paragraph with the body of the question and I also want to render an array of list elements which will be all the possible answers. The problem I'm having is that the list of answers is not rendering... Here is my code

function Question(props) {  
 const [answers, setAnswers] = React.useState(props.answers);

    return (
        <div>
            <p>{props.question}</p>
            {answers.map(el => {
                <li>{el}</li>
            })}
        </div>
    )
}

export default Question
bocacrst
  • 13
  • 3
  • Does this answer your question? [When should I use a return statement in ES6 arrow functions](https://stackoverflow.com/questions/28889450/when-should-i-use-a-return-statement-in-es6-arrow-functions) – Brian Thompson Jul 20 '22 at 14:24

2 Answers2

0

You have to return the element from function

function Question(props) {  
 const [answers, setAnswers] = React.useState(props.answers);

    return (
        <div>
            <p>{props.question}</p>
            {answers.map(el => {
               return <li>{el}</li>
            })}
        </div>
    )
}

export default Question

or directly pass without {} like below

function Question(props) {  
     const [answers, setAnswers] = React.useState(props.answers);
    
        return (
            <div>
                <p>{props.question}</p>
                {answers.map(el => <li>{el}</li>)}
            </div>
        )
    }
    
    export default Question
Codenatial Developer
  • 328
  • 1
  • 4
  • 11
0

while doing forEach, filter, map or etc. You need to return the HTML element to render. So in your case, it's not returned so it's not rendering.

 return (
        <div>
            <p>{props.question}</p>
            {answers.map(el => {
               return <li>{el}</li>
            })}
        </div>
    )
Aravind
  • 600
  • 5
  • 12