I am creating a quiz app. I want to display result as follows

Question:
Your Answer:
Correct answer:

But currently my code is displaying in a line like this (please see image link to view actual results):-

Question: Your Answer: Correct Answer:
Image Link: https://ibb.co/30v89qS

below is my code

var indents = [];

for (var i = 0; i < questions.length; i++) {

    indents.push(<span><p>Question: {[questionWrongSelection[i], `Your Answer: ${wrongAnswer[i]}`, `Correct Answer:\n ${rightAnswer[i]}`]}</p></span>);
}

And this is how the div looks:-

<div className='wrongselection'>
                            <hr />
                            <h3>Wrong Answers</h3>
                            <p>
                                <p>
                                    {indents.map(indent=><div>{indent}</div>)}
                                </p>
                            </p>
                        </div>

I tried .map method but for some reason it is not working for me or may be I am using it in a wrong way. Any help will be highly appreciated.

>Solution :

Just enclose the contents on each separate <p> tags.

var indents = [];

for (var i = 0; i < questions.length; i++) {
  indents.push(
    <span>
      <p>Question: {questionWrongSelection[i]}</p>
      <p>Your Answer: {wrongAnswer[i]} </p>
      <p>Correct Answer: {rightAnswer[i]}</p>
    </span>
  );
}