I have an array "questions" with 24 questions, but the last one in the array is not shown and taken into the final score. And I can't figure out why it only renders 23 times.

I was wondering if it might have to do with the index, but I can't fully tell what is going wrong and how to fix it.

This is the code I have so far:

const questions = [
  "...halten wir uns streng an formelle Benimmvorschriften.",
  "...ist es wichtig, mit unserem Handeln Gewinn zu erwirtschaften.",
  "...erwarten wir, dass andere mehr Einfluss haben wollen.",
  "...streben wir nach einer perfekten Lösung.",
  "...ist das Wohlbefinden anderer ein gutes Argument.",
  "...werden ausgefallene Ideen gefördert.",
  "...erwarten wir voneinander, dass wir die internen Weisungen strikt einhalten.",
  "...hat alles seinen (monetären) Preis.",
  "...gilt Einfluss als wichtige Eigenschaft.",
  "...ist wichtig, dass Dinge ihre Funktion erfüllen.",
  "...erwarten wir, dass sich Vorgesetzte auch um die persönlichen Anliegen der Mitarbeitenden kümmern.",
  "...ist «out of the box» ein gutes Argument.",
  "...halten wir uns an Vorschriften, die bestimmen, welches Verhalten zulässig/erlaubt ist.",
  "...sind Anreize wirksam, wenn sie mit Geldzahlungen verbunden sind.",
  "...bemühen wir uns um einflussreiche Leute.",
  "...muss etwas, das nicht funktioniert, repariert werden.",
  "...gehen wir auf individuelle Lebenssituationen der Mitarbeitenden ein.",
  "...ist es erwünscht, neue Dinge auszuprobieren.",
  "...ist eine vorgegebene Regel ein gutes Argument.",
  "...werden Handlungen als richtig erachtet, wenn sie einen Gewinn versprechen.",
  "...gelten Kolleg*innen mit grosser Macht als erfolgreich.",
  "...entwickeln wir Lösungen so, dass sie ihren Zweck erfüllen.",
  "...achten wir darauf, ob es anderen gut geht.",
  "...ist es ein Kompliment, originell zu sein. ",
];

const Survey = () => {
   // Array of options
   const options = [
    { value: 1, text: "Trifft nicht zu", score: 0.25 },
    { value: 2, text: "Trifft eher nicht zu", score: 0.5 },
    { value: 3, text: "Trifft nicht zu", score: 0.75 },
    { value: 4, text: "Trifft eher nicht zu", score: 1 },
    { value: 5, text: "Trifft zu", score: 1.25 },
    { value: 6, text: "Trifft voll zu", score: 1.5 }
  ];

  // State to keep track of the current question
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const questionsRef = useRef(questions);

  // State to keep track of the current response
  const [responses, setResponses] = useState(Array(questions.length).fill(0));
  const [chartData, setChartData] = useState({});

  useEffect(() => {
    // Array of categories
    const categories = ["Juristische Dimension", "Ökonomische Dimension", "Politische Dimension", "Technische Dimension", "Soziale Dimension", "Kreative Dimension"];

    // Code to calculate the scores for each category
    const categoryScores = Array(6).fill(0);
    questionsRef.current.forEach((_, i) => {
      categoryScores[Math.floor(i/4)]  = responses[i];
    });
    // Set the chartData state with the calculated category scores
    setChartData({
      labels: categories,
      datasets: [{
        label: "Score",
        data: categoryScores,
        backgroundColor: 'rgba(0, 128, 47, 0.5)',
        borderColor: 'rgba(0, 128, 47, 0.1)'
      }],
    });
  }, [responses]);

    // Data for the radar chart
    ChartJS.register(
      RadialLinearScale,
      PointElement,
      LineElement,
      Filler
    );

    const myImage = new Image(25, 25);
    myImage.src = 'https://i.stack.imgur.com/gXQrT.png';

  return (
    <div>
      {currentQuestion === questions.length - 1 ? (
        <Radar
        data={chartData}
        options={{
        scale: {
          beginAtZero: true,
          max: 6,
          min: 0,
            ticks: {
                stepSize: 1,
            }
        }
      }}/>
      ) : (
        <div>
          <p>In meinem direkten Arbeitsumfeld .../ In der Gruppe in der ich mich wohl fühle ... <br></br> {questions[currentQuestion]}</p>
          {options.map((option) => (
            <button
              key={option.value}
              onClick={() => {
                setResponses(
                  responses.map((response, index) => {
                    if (index === currentQuestion) {
                      return option.score;
                    }
                    return response;
                  })
                );
                setCurrentQuestion(currentQuestion   1);
              }}
            >
              {option.text}
            </button>
          ))}
        </div>
      )}
    </div>
  );

};

CodePudding user response：

You have to remove that -1 in the code below.

  <div>
    {currentQuestion === questions.length ? ( // remove -1 from here
      <Radar
      data={chartData}
      options={{
      scale: {
        beginAtZero: true,
        max: 6,
        min: 0,
          ticks: {
              stepSize: 1,
          }
      }
    }}
  />

I don't know what is Radar component but it seems you want to render it after all questions are shown. The currentQuestion starts with 0 so the condition must be n 1 with this logic that has been implemented.