How to return a forEach within a map function in React JS

Question

I have created a quiz and i have a component which shows the user the results at the end of the quiz. I would also like to show the user which questions they got right/wrong.

At the moment I am displaying the questions and the correctAnswer however all of the correct answers are displaying under each question.

I would like to display ONE correctanswer under each question. I have tried numerous solutions, but cannot get it to work. I thought that I could map over each question and then within the .map do a forEach to return each correct answer for each one but it doesn't work.

Here is what I have so far:

resultsCard.js component:

import React from "react";
import "./../assets/style.css";

const ResultCard = ({
  score,
  playAgain,
  getQuestions,
  questions,
  userAnswer,
  correctAnswer
}) => {
  return (
    <div>
      <div>You scored {score} out of 5! </div>

      <div className="playBtnBox">
        <button className="playBtn" type="button" onClick={getQuestions}>
          Play again
        </button>
      </div>

      <div>
        {questions.map(question => {
          return (
            <div>
              <div className="questionBox"> {question}</div>
               <div className="questionBox"> {correctAnswer}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default ResultCard;

index.js where results are being used:

class QuizBee extends Component {

  state = {
    qBank: [],
    score: 0,
    responses: 0
  };

  getQuestions = () => {
    quizService().then(question => {
      this.setState({
        qBank: question,
        score: 0,
        responses: 0 
      });
    });
  };



  componentDidMount() {
    this.getQuestions();
  }

  render() {
    return (
      <div className="container">
        <div className="title">Quiz Me</div>
        {this.state.qBank.length > 0 && 
        this.state.responses < 5 && 
          this.state.qBank.map(quest => {         
            const { question, answers, correct, questionId } = quest;
            return (
              <QuestionBox
                question={question}
                options={answers}
                key={questionId}
                correct={correct}
                incrementScore={this.incrementScore}
                incrementResponse={this.incrementResponse}
              />
            );
          })}

        {this.state.responses === 5 && (
          <h2>
            <ResultCard
              score={this.state.score}
              getQuestions={this.getQuestions}
              questions={this.state.qBank.map(quest => {
                const {question} = quest;
                return (
                  question
                )
              })}
              correctAnswer={this.state.qBank.map(quest => {   
                const {correct} = quest;
                return (
                  correct
                )
              })}

            />
          </h2>
        )}
      </div>
    );
  }
}

qBank data:

const qBank = [
  {
    question:
      "Virgin Trains, Virgin Atlantic and Virgin Racing, are all companies owned by which famous entrepreneur?   ",
    answers: ["Richard Branson", "Alan Sugar", "Donald Trump", "Bill Gates"],
    correct: "Richard Branson",
    questionId: "099099"
  },
  {
    question:
      'Where is the train station "Llanfair­pwllgwyngyll­gogery­chwyrn­drobwll­llan­tysilio­gogo­goch"?',
    answers: ["Wales", "Moldova", "Czech Republic", "Denmark"],
    correct: "Wales",
    questionId: "183452"
  },
  {
    question:
      "Which company did Valve cooperate with in the creation of the Vive?",
    answers: ["HTC", "Oculus", "Google", "Razer"],
    correct: "HTC",
    questionId: "267908"
  },
  {
    question: "What's the name of Batman's  parents?",
    answers: [
      "Thomas & Martha",
      "Joey & Jackie",
      "Jason & Sarah",
      "TodWhat is the most common surd & Mira"
    ],
    correct: "Thomas & Martha",
    questionId: "333247"
  }
]

Answer 1

althought <ResultCard/> is expecting a userAnswer prop it's is not been passed, if you pass it to <ResultCard...props userAnswer={some answer}/> then just compare the userAnswer with the correct answer;

const ResultCard = ({
  score,
  playAgain,
  getQuestions,
  questions,
  userAnswer,
  correctAnswer
}) => {
  return (
    <div>
      <div>You scored {score} out of 5! </div>

      <div className="playBtnBox">
        <button className="playBtn" type="button" onClick={getQuestions}>
          Play again
        </button>
      </div>

      <div>
        {questions.map(question => {
          return (
            <div>
              <div className="questionBox"> {question}</div>
               <div className="questionBox"> {correctAnswer ===userAnswer? 'you answered it correctly': 'you got it wrong'}</div>
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default ResultCard;```