Get result based on id of previous selection-CodePudding

I am creating a flow chart of sorts in React, where a question with possible answers are listed below. Depending on the answer selected, a new question with new possible answers should appear. I am having trouble passing the 'questionId' from the answer to display the next question. Here is a sample of the code I am working with (Sample data in this case, final JSON data will be in this same format). This implementation works at first, but with a bigger set of questions I am running into problems where the incorrect question is being displayed. I've doubled checked that the questionId matches the id of the desired question. I suspect that I am using state incorrectly, or using [nextQuestion] as the index when mapping through the array may not be the correct way to do this. The flow of questions is not linear (ie, question 2 may have an answer that skips to question 15).

How can I refactor this to display a question with id that matches the selected answer's questionId?

Example of the UI (logic is more important than visuals right now)

import React, { useState, useEffect } from 'react';

export function Flowchart() {
const [nextQuestion, setNextQuestion] = useState<number>(0)};

const Questions = [
{
      id: 0,
      question: 'Question 0',
      answers: [
        {
          id: 1,
          answer: 'Go to Question 1',
          questionId: 1
        },
        {
          id: 2,
          answer: 'Go to Question 2',
          questionId: 2
        }
      ]
    },
{
      id: 1,
      question: 'Question 1',
      answers: [
        {
          id: 1,
          answer: 'Go to Question 0',
          questionId: 0
        },
        {
          id: 2,
          answer: 'Go to Question 2',
          questionId: 2
        }
      ]
    },
{
      id: 2,
      question: 'Question 2',
      answers: [
        {
          id: 1,
          answer: 'Go to Question 0',
          questionId: 0
        },
        {
          id: 2,
          answer: 'Go to Question 1',
          questionId: 1
        }
      ]
    },
];

return (
    <div className="flowchart__container">
      <h1>{chartTitle}</h1>
      <p>{Questions[nextQuestion].question}</p>
      {Questions[nextQuestion].answers.map((answer) => (
        <button onClick={() => setNextQuestion(answer.questionId)} key={answer.id}>
          {answer.answer}
        </button>
      ))}
    </div>
  );
}

EDIT - Solved by using the find() method. Thanks for the suggestion, Layhout! Here is the updated JSX that works:

const currentQuestion = Questions.find((q) => q.id === nextQuestion);

  return (
    <div className="flowchart__container">
      <h1>{chartTitle}</h1>
      <p>{currentQuestion ? currentQuestion.question : null}</p>
      {currentQuestion
        ? currentQuestion.answers.map((answer) => (
            <button onClick={() => setNextQuestion(answer.questionId)}  key={answer.id}>
              {answer.answer}
            </button>
          ))
        : null}
    </div>
  );

CodePudding user response：

because of Questions is an array, when you write Questions[nextQuestion].question, you get question based of index of the array and not the questionId. you should use find to get the correct question from the array with questionId.

...
return (
    <div className="flowchart__container">
      <h1>{chartTitle}</h1>
      <p>{Questions.find(q => q.id === nextQuestion).question}</p>
      {Questions.find(q => q.id === nextQuestion).answers.map((answer) => (
        <button onClick={() => setNextQuestion(answer.questionId)} key={answer.id}>
          {answer.answer}
        </button>
      ))}
    </div>
);