# Antworten einer Quizfrage aus der Json Datenbank mappen



## nikva (12. Jan 2021)

Hallo,
Ich versuche aktuell Fragen aus einer Json Datenbank in ein Quiz zu laden und die Antworten der Frage in der Frage in Buttons zu laden.
Wenn ich aber versuche die Antworten abzurufen, kommt der Fehler: *( Line 87:10:  'question' is not defined  no-undef)*
Wäre dankbar für einen Tipp wo mein Fehler liegt.



Spoiler: js Klasse





```
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;
```






Spoiler: Datenbank Klasse mit Platzhalterfragen





```
{
  "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"
  }
}
```


----------



## coffeebean (12. Jan 2021)

Müsste es in Zeile 87 nicht questions heißen?


----------



## nikva (12. Jan 2021)

Nein, questions ist das Fragen Array, question ist die Frage aus der Datenbank


----------



## mihe7 (13. Jan 2021)

nikva hat gesagt.:


> Wäre dankbar für einen Tipp wo mein Fehler liegt.


Du beendest die map-Operation in den Zeilen 72/73, außerhalb existiert question nicht.


----------



## nikva (14. Jan 2021)

mihe7 hat gesagt.:


> Du beendest die map-Operation in den Zeilen 72/73, außerhalb existiert question nicht.


Also muss ich die Scoreanzeige rausnehmen und auslagern? Oder gibt es da einen eleganteren Weg?


----------



## nikva (14. Jan 2021)

Ich hab es jetzt ne weile versucht aber, ich komme nicht zur Lösung. Die Fragen werden zwar geladen(was ich durch logs sehen kann), aber ich kann auf Teufel komm raus nicht die Antwortmöglichkeiten hinzufügen. Wäre dankbar wenn mich jemand hier nen Schritt weiter bringen könnte.


----------



## mihe7 (14. Jan 2021)

Man weiß ja nicht, was Du genau haben willst  Es könnte auch sein, dass Du z. B. über this.state.questions in Verbindung mit this.state.currentQuestion gehen kannst.


----------



## nikva (14. Jan 2021)

Ich habs folgendermaßen probiert, aber habe immer noch das selbe Problem(TypeError: this.state.questions[this.state.currentQuestion] is undefined). Was ich will, ist dass ich die Fragen zufällig aus der Datenbank wähle( was auch mit getrandomizedquestions funktioniert). Nun will ich diese Fragen im Quiz darstellen mit den onclick buttons und nach jedem button festhalten ob die antwort richtig war und das im score speichern( was auch mit testfragen ohne datenbank super geklappt hat). Nun kriege ich beim Versuch die Fragen zu mappen aber immer reference error

[CODE lang="javascript" highlight="66-93"]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.showScore ? (
                    <div className='score-section'>
                        korrekt beantwortet: {this.state.score} von {this.state.questions.length}
                    </div>
                ) : (
                    <>
                        <div className='question-section'>
                            <div className='question-count'>
                                <span>Frage {this.state.currentQuestion + 1}</span>/{this.state.questions.length}
                            </div>
                            <div className='question-text'>{this.state.questions[this.state.currentQuestion].questionText}</div>
                        </div>
                        <div className='answer-section'>
                            {this.state.questions[this.state.currentQuestion].answers.map((answer) => (
                                <button onClick={() => this.handleAnswerOptionClick(answer.isCorrect)}>{answer.answers}</button>
                            ))}
                        </div>
                    </>
                )
                }
            </div>
        )
                }
}
export default Play_quiz;[/CODE]



Spoiler: db.json





```
{
  "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"
  }
}
```


----------



## nikva (15. Jan 2021)

mihe7 hat gesagt.:


> Man weiß ja nicht, was Du genau haben willst


vll gehe ich mal schritt für schritt durch wie ich mir das gedacht habe und ihr weißt mich auf meinen Denkfehler hin:
Zuerst lade ich in *"getRandomizedQuestion"* ein array aus der Datenbank, dass die Beispielfragen beinhaltet und mappe das auf das questions [ ] array im state.

In der Render Methode wird dann false *showscore* auf "false" steht (default wert) die Nummer der Frage

```
{this.state.currentQuestion + 1}
```

und die Anzahl der Gesamtfragen angezeigt

```
{this.state.questions.length}
```

anschließend wird dann "title" = fragetext der question auf array position 0  geholt mit:

```
{this.state.questions[this.state.currentQuestion].title
```

und zuletzt dann die Antwortmöglichkeiten dieser Frage mit folgenden zeilen auf onclickbuttons gemappt
wo jedoch der Fehler *TypeError: this.state.questions[this.state.currentQuestion] is undefined auftritt*
was ja darauf hindeutet, dass die Antwortmöglichkeiten nicht mit aus der Datenbank gezogen werden aus welchen Grund auch immer...


```
<div className='answer-section'>
                            {this.state.questions[this.state.currentQuestion].answers.map((answer) => (
                                <button onClick={() => this.handleAnswerOptionClick(answer.isCorrect)}>{answer.title}</button>
```
mit folgender methode zähle ich dann den score

```
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
            })
        }
    };
```






Spoiler: komplette play_quiz





```
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.showScore ? (
                    <div className='score-section'>
                        korrekt beantwortet: {this.state.score} von {this.state.questions.length}
                    </div>
                ) : (
                    <>
                        <div className='question-section'>
                            <div className='question-count'>
                                <span>Frage {this.state.currentQuestion + 1}</span>/{this.state.questions.length}
                            </div>
                            <div className='question-text'>{this.state.questions[this.state.currentQuestion].title}</div>
                        </div>
                        <div className='answer-section'>
                            {this.state.questions[this.state.currentQuestion].answers.map((answer) => (
                                <button onClick={() => this.handleAnswerOptionClick(answer.isCorrect)}>{answer.title}</button>
                            ))}
                        </div>
                    </>
                )
                }
            </div>
        )
                }
}
export default Play_quiz;
```







Spoiler: db.json





```
{
  "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"
  }
}
```


----------



## mihe7 (15. Jan 2021)

nikva hat gesagt.:


> TypeError: this.state.questions[this.state.currentQuestion] is undefined auftritt


Was darauf hindeutet, dass this.state.questions leer ist. Den Fall müsstest Du vorab abfangen.

Geh mal per Einzelschritt durch bzw. lass Dir mehr auf der Konsole ausgeben, damit Du nachvollziehen kannst, wo das Problem liegt.


----------



## nikva (15. Jan 2021)

ich habe den zustand des arrays im log anzeigen lassen und es scheint tatsächlich innerhalb der render leer zu sein(artraylänge 0). Ich habe dann ein Problem gefunden, bei dem Arrays manchmal schneller Rendern als sie befüllt werden und hab mal durch folgende wartefunktion getestet ob es bei mir der fall ist. Damit funktioniert es jetzt nach mehrmaligem aktualisieren zumindest für eine Frage bis dann der selbe Fehler auftaucht. Wenn ich die nicht multiple choice Fragen rausnehme, funktioniert es auch, aber ohne dass man den Inhalt der Felder sieht(man kann sie aber blind anklicken und das Quiz "läuft". Ich müsste also eine Art check vor jeder Frage durchführen ob die Frage multiple choice(ein array) ist und sie nur dann rendern. Ansonsten müsste ich einen anderen Weg finden die Frage darzustellen.


```
render() {
        return (
          <div className="quiz-window">
            {this.state.showScore ? (
              <div className="score-section">
                korrekt beantwortet: {this.state.score} von{" "}
                {this.state.questions.length}
              </div>
            ) : this.state.questions.length > 0 ? (
              <>
                <div className="question-section">
                  <div className="question-count">
                    <span>Frage {this.state.currentQuestion + 1}</span>/
                    {this.state.questions.length}
                  </div>
                  <div className="question-text">
                    {this.state.questions[this.state.currentQuestion].title}
                  </div>
                </div>
                <div className="answer-section">
                  {this.state.questions[this.state.currentQuestion].answers.map(
                    (answer) => (
                      <button
                        onClick={() => this.handleAnswerOptionClick(answer.isCorrect)}
                      >
                        {answer.title}
                      </button>
                    )
                  )}
                </div>
              </>
            ) : (
              <p>Loading</p>
            )}
          </div>
        );
      }
```


----------



## mihe7 (15. Jan 2021)

nikva hat gesagt.:


> bei dem Arrays manchmal schneller Rendern als sie befüllt werden


Das kann eigentlich nicht sein, da das gerenderte Array nicht "befüllt" wird. Es wird einfach gesetzt.

Ersetz doch einfach mal den Code, der die Daten abruft, durch was statisches.


----------



## nikva (15. Jan 2021)

Wenn ich aber den Zustand von showscore auf "true" setze, zeigt er auch die richtige länge des Arrays an(in diesem Fall 3), der Zustand des Arrays im Log innerhalb der Render ist aber trotzdem 0, wenn man jedoch wartet so wie in meiner methode nicht. 


mihe7 hat gesagt.:


> Ersetz doch einfach mal den Code, der die Daten abruft, durch was statisches.


was genau meinst du damit?


----------



## mihe7 (15. Jan 2021)

Ich meine, dass Du 

```
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);
                }
            );
    };
```
einfach mal z. B. durch

```
getRandomizedQuestions = () => {
        const result = [
    {
      "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
    }
        ];
        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 });
    };
```
ersetzen sollst.


----------



## nikva (15. Jan 2021)

Das habe ich schon probiert und es klappt auch. Das Problem ist, dass die Render() Methode im Lyfe cycle vor der componentDidMount() Methode liegt und somit Versucht ein Array zu verwenden, dass noch leer ist.
siehe hier
Ich habe versucht dies durch

```
this.state.questions.length > 0 ?
```
zu fixen, was jetzt nach mehrmaligen aktualisieren mal klappt und mal nicht. Es scheint als würden Render und componentDidMount() jetzt ein Rennen abliefern und je nachdem wer schneller ist, erhalte ich entweder ein undefined Array oder zumindest die erste Frage wird gerendert.

Dies Versuche ich grade durch eine weitere Bedingung am start zu beheben, in der ich überprüfe ob das Array überhaupt existiert bevor die Render Methode ausgeführt wird. Hierbei setze ich aber wohl die Klammern iwo Falsch, denn ich erzeuge "unreachable code"

```
render() {
        return (
            if (Array.isArray(this.state.questions) && this.state.questions.length) {
          <div className="quiz-window">
            {this.state.showScore ? (

              <div className="score-section">
                korrekt beantwortet: {this.state.score} von{" "}
                {this.state.questions.length}
              </div>
            ) : this.state.questions.length > 0 ? (
              <>
                <div className="question-section">

                  <div className="question-count">
                    <span>Frage {this.state.currentQuestion + 1}</span>/
                    {this.state.questions.length}
                  </div>

                  <div className="question-text">
                    {this.state.questions[this.state.currentQuestion].question}
                  </div>
                </div>

                <div className="answer-section">
                  {this.state.questions[this.state.currentQuestion].answers.map(
                    (answer) => (
                      <button onClick={() => this.handleAnswerOptionClick(answer.isCorrect)}>
                        {answer.question}
                      </button>
                    )
                  )}
                </div>
              </>
            ) : (
              <p>lädt...</p>
            )}
          </div>
      
            }
            else {
                <p>lädt...</p>
            }
        );
      }
```


----------



## mrBrown (15. Jan 2021)

Das if darf so nicht in dem return stehen. Entweder ternären Operator nutzen, oder das return innerhalb des if- bzw. else-Blocks.

Und genereller Tipp: Functional Components machen oftmals einiges deutlich einfacher, solltest du dir mal angucken, möglicherweise sind dir für dich jetzt schon interessant


----------



## nikva (15. Jan 2021)

mrBrown hat gesagt.:


> das return innerhalb des if- bzw. else-Blocks.


hab ich gemacht. Das Problem ist jetzt, dass die Methode wie ich es wollte nicht mehr versucht ein leeres Array abzurufen, jedoch funktioniert jetzt das mapping nicht bzw ich sehe jetzt erst, dass es die ganze zeit nicht funktioniert hat, mit der Fehlermeldung

TypeError: this.state.questions[this.state.currentQuestion].answers.map is not a function

Die Buttons haben aber vorher schon funktioniert. Zwar waren die Felder leer, jedoch konnte man sie anklicken und hat auch damit die handleAnswerOnClick ausgelöst und den score gezählt.
Jetzt aber scheint der Typ von "answers" nicht mehr mit der map Methode kombatibel zu sein?


```
render() {
        if (Array.isArray(this.state.questions) && this.state.questions.length) {
        return (
          <div className="quiz-window">
            {this.state.showScore ? (

              <div className="score-section">
                korrekt beantwortet: {this.state.score} von{" "}
                {this.state.questions.length}
              </div>
            ) : this.state.questions.length > 0 ? (
              <>
                <div className="question-section">

                  <div className="question-count">
                    <span>Frage {this.state.currentQuestion + 1}</span>/
                    {this.state.questions.length}
                  </div>

                  <div className="question-text">
                    {this.state.questions[this.state.currentQuestion].question}
                  </div>
                </div>

                <div className="answer-section">
                  {this.state.questions[this.state.currentQuestion].answers.map(
                    (answer) => (
                      <button onClick={() => this.handleAnswerOptionClick(answer.isCorrect)}>
                        {answer.question}
                      </button>
                    )
                  )}
                </div>
              </>
            ) : (
              <p>lädt...</p>
            )}
          </div>
        );
    }
    else {
        return (
        <p>lädt...</p>
        )
    }
      }
```


----------



## mrBrown (15. Jan 2021)

nikva hat gesagt.:


> Jetzt aber scheint der Typ von "answers" nicht mehr mit der map Methode kombatibel zu sein?


Answers ist bei dir auch bei unterschiedlichen Fragen ein unterschiedlicher Typ, entweder ein string oder ein Array von Objekten.


----------



## nikva (15. Jan 2021)

mrBrown hat gesagt.:


> Answers ist bei dir auch bei unterschiedlichen Fragen ein unterschiedlicher Typ, entweder ein string oder ein Array von Objekten.


Ich muss also erstmal Abfragen ob die Frage eine multiple choice Frage ist und dann für beide Fälle den Return definieren...


----------



## mrBrown (15. Jan 2021)

nikva hat gesagt.:


> Ich muss also erstmal Abfragen ob die Frage eine multiple choice Frage ist und dann für beide Fälle den Return definieren...


Ja, oder Sternären Operator.

Sinnvoll wäre es an dieser Stelle, zusätzliche Componenten zu nutzen, damit nicht die eine Komponente alles macht


----------



## nikva (15. Jan 2021)

Ich habe jetzt um zu testen, ob zumindest die MC Fragen funktionieren alle nicht MC Fragen aus der Datenbank genommen. Jetzt rendert zwar die Frage immer, aber es wird zum einen die anzahl der Fragen die anhand der Arraylänge bestimmt wird

```
<div className="question-count">
                    <span>Frage {this.state.currentQuestion + 1}</span>/
                    {this.state.questions.length}
                  </div>
```
immer eins zu hoch angezeigt und außerdem kriege ich nach dem anklicken der ersten Frage wieder den Fehler, dass das Array undefined ist, was wahrscheinlich beides aus dem selben Grund passiert: Es wird zusätzlich zu der MC Frage noch ein weiteres leeres Array geladen aus irgendeinem Grund.


----------



## mihe7 (15. Jan 2021)

Lass Dir einfach mal this.state.questions auf der Konsole ausgeben, dann wirst Du den Grund schon sehen.


----------



## nikva (15. Jan 2021)

mihe7 hat gesagt.:


> Lass Dir einfach mal this.state.questions auf der Konsole ausgeben, dann wirst Du den Grund schon sehen.


wie vermutet ist da die MC Frage drin und eben ein "undefined" objekt


----------



## mihe7 (15. Jan 2021)

Und wo kommt das her?


----------



## nikva (17. Jan 2021)

mihe7 hat gesagt.:


> Und wo kommt das her?


Ich weiß es nicht, dachte vielleicht, dass es wieder daran liegt, dass das Array gerendert wird bevor es befüllt wird, aber dann dürften ja eigentlich gar keine Fragen drin sein.


----------



## mihe7 (17. Jan 2021)

Dann musst Du mal im Browser im Einzelschritt durchgehen.


----------

