I try to map the content of an Array i mapped but cant reach it (is not defined no-undef)

In my implementation i want to load an array of questions from my JSON database, to play a quiz. My function loads the questions and maps them. Now after checking if there are still open questions(showscore? in score selection) it should take the questions array and map the answer options. My problem is, that i cant reach the questions('question" is not defined no-undef) because i am asking for showscore in between. Is there a way to get this to compile?

My code looks like this:(the database are just filler questions for now)

import './play_quiz.css';
import React from "react"

class Play_quiz extends React.Component {

    state = {
        currentQuestion: 0,
        showScore: false,
        score: 0,
        questions: []
    }

    componentDidMount() {
        this.getRandomizedQuestions();
        console.log("Current state:")
    }

    getRandomizedQuestions = () => {
        const apiUrl = 'http://localhost:3001/questions'
        fetch(apiUrl)
            .then((response) => response.json())
            .then(
                (result) => {
                    console.log("From database:");
                    console.log(result);

                    let amountOfQuestions = result.length;
                    let randomizedResult = [];
                    for (let i = 0; i < amountOfQuestions; i++) {
                       let randomIndex = Math.floor(Math.random() * result.length);
                       randomizedResult.push(result[randomIndex]);
                       result.splice(randomIndex, 1);
                    }
                    //const randomizedResult  = result.sort(() => Math.random() - 0.5)
                    this.setState({questions: randomizedResult });
                },
                (error) => {
                    console.log('An unexpected error occurred', error);
                }
            );
    };


    handleAnswerOptionClick = (isCorrect) => {
        if (isCorrect) {
            this.setState({ score: this.state.score + 1 });
        }

        const nextQuestion = this.state.currentQuestion + 1;
        if (nextQuestion < this.state.questions.length) {
            this.setState({
                currentQuestion: nextQuestion
            })
        } else {
            this.setState({
                showScore: true
            })
        }
    };

    updateCurrentQuestion = () => {
        this.setState({ currentQuestion: this.state.currentQuestion + 1 })

    }

    render() {
        return (
            <div className='quiz-window'>
                {this.state.questions.map((question, index) => (
                    <div key={index}>
                        {question.title}
                    </div>)
                )
                }
                {this.state.showScore ? (
                    <div className='score-section'>
                        korrekt beantwortet: {this.state.score} von {this.state.questions.length}
                    </div>
                ) : (
                        <div>
                            <div className='question-section'>
                                <div className='question-count'>
                                    <span>Frage {this.updateCurrentQuestion}</span>/{this.state.questions.length}
                                </div>
                            </div>

                            <div className='answer-section'>
                                {question.answers.map(answer => (
                                                  <button key={answer.number} onClick={() => this.handleAnswerOptionClick(answer.isCorrect)}>
                                                  {answer.answer}
                                                  </button>
                                    ))}
                            </div>
                        </div>
                    )
                }
            </div>
        )
    }
}
export default Play_quiz;
{
  "questions": [
    {
      "id": 0,
      "title": "Pi Dezimal",
      "author": "Timo",
      "isMC": false,
      "question": "Wie lauten die 4 ersten Dezimalstellen von Pi?",
      "answers": "1415",
      "category": null
    },
    {
      "id": 1,
      "title": "Längster Fluss",
      "author": "Timo",
      "isMC": true,
      "question": "Welcher ist der längte Fluss der Welt?",
      "answers": [
        {
          "number": 1,
          "answer": "Donau",
          "isCorrect": false
        },
        {
          "number": 2,
          "answer": "Nil",
          "isCorrect": true
        },
        {
          "number": 3,
          "answer": "Wolga",
          "isCorrect": false
        },
        {
          "number": 4,
          "answer": "Amazonas",
          "isCorrect": false
        }
      ],
      "category": null
    },
    {
      "id": 2,
      "title": "Energieaufnahme Pflanzen",
      "author": "Timo",
      "isMC": false,
      "question": "Durch welchen Vorgang gewinnen Pflanzen Energie?",
      "answers": "Photosynthese",
      "category": null
    }
  ],


  "quizzes": [
    {
      "id": 0,
      "player": "Emil",
      "questions" : [
        {
          "number" : 0,
          "referenceID" : 1,
          "isAnswered" : false,
          "isCorrectlyAnswered" : false
        },
        {
          "number" : 1,
          "referenceID" : 0,
          "isAnswered" : false,
          "isCorrectlyAnswered" : false
        }
      ],
      "grade" : null,
      "editingTime" : null,
      "isFinished" : false
    }
  ],


  "profile": {
    "name": "typicode"
  }
}


Read more here: https://stackoverflow.com/questions/65722641/i-try-to-map-the-content-of-an-array-i-mapped-but-cant-reach-it-is-not-defined

Content Attribution

This content was originally published by Erazo at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: