Question 183181 in Javascript Question posted in
A very good W3school tutorial can be found here.

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

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.

Tags:

2

Answers


  1. 0

    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>
  );
}
    Login or Signup to reply.
  2. 0 
    var indents = [];

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

    each question, answer, and the correct answer is wrapped inside a with the class name "result". You can then apply CSS styles to achieve the column layout
    css below –

    .result {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.result div {
  margin-bottom: 5px;
}

    Make sure to include the CSS styles in your component or in a separate CSS file that is imported into your component. The display: flex; property with flex-direction: column; creates a column layout for the results, and the margin-bottom properties add some spacing between each result.

    Finally, render the indents array in your component:

    return <div>{indents}</div>;

    Hope this will help!!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search