Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to render array vertically in REACT?

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):-

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

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>
  );
}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading