TypeError: _this.props.route.params is not a function... is an instance of Object)

Question

I'm kinda new to React Native and I'm trying to create a trivia game with 3 categories. I'm using Expo and my project have two main files to call the category question files and to enter the quiz itself, IndexQuiz.js and Quiz.js. The screen before IndexQuiz in the navigation is just a menu that I get to in these categories.

IndexQuiz.js:

import React from "react";
import { ScrollView, StatusBar, TouchableOpacity, Text, Image, View, SafeAreaView} from "react-native";
import { AppStyles, DesafiosStyles } from "../AppStyles";
import questoes_arquitetura from "../questions/questoes_arquitetura";
import questoes_curiosidades from "../questions/questoes_curiosidades";
import questoes_historia from "../questions/questoes_historia";

export default ({ navigation }) => (
  <ScrollView style={{backgroundColor:"rgb(32, 53, 70)"}}>
    <StatusBar barStyle="light-content" />
    <SafeAreaView style={{alignItems: "center", flexDirection: "column"}}>

  <Text style={AppStyles.titleText}>Categorias</Text>
  <TouchableOpacity onPress={() => 
    navigation.navigate("Quiz", {
      title: "Arquitetura",
      questions: questoes_arquitetura,
      color: "#36b1f0"
    })} 
    style={DesafiosStyles.cardContainer}>
    <Image style={DesafiosStyles.cardImage} source={require("../assets/tp_madre.jpg")}/>
    <View style={DesafiosStyles.cardContent}>
      <Text style={DesafiosStyles.cardTitle}>Arquitetura</Text>
    </View>
  </TouchableOpacity>

  <TouchableOpacity onPress={() => 
    navigation.navigate("Quiz", {
      title: "Curiosidades",
      questions: questoes_curiosidades,
      color: "#36b1f0"
    })} 
    style={DesafiosStyles.cardContainer}>
    <Image style={DesafiosStyles.cardImage} source={require("../assets/tp_madre.jpg")}/>
    <View style={DesafiosStyles.cardContent}>
      <Text style={DesafiosStyles.cardTitle}>Curiosidades</Text>
    </View>
  </TouchableOpacity>

  <TouchableOpacity onPress={() => 
    navigation.navigate("Quiz", {
      title: "História",
      questions: questoes_historia,
      color: "#36b1f0"
    })} 
    style={DesafiosStyles.cardContainer}>
    <Image style={DesafiosStyles.cardImage} source={require("../assets/tp_madre.jpg")}/>
    <View style={DesafiosStyles.cardContent}>
      <Text style={DesafiosStyles.cardTitle}>História</Text>
    </View>
  </TouchableOpacity>

</SafeAreaView>

);

Quiz.js:

import React from "react";
import { View, StyleSheet, StatusBar, Text, SafeAreaView } from "react-native";
import { Button, ButtonContainer } from "../components/Button";
import { Alert } from "../components/Alert";

const styles = StyleSheet.create({ ...

export default class Quiz extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      correctCount: 0,
      totalCount: this.props.route.params("questions", []).length,
      activeQuestionIndex: 0,
      answered: false,
      answerCorrect: false
    }
}

  answer = correct => {
    this.setState(
      state => {
        const nextState = { answered: true };

        if (correct) {
          nextState.correctCount = state.correctCount + 1;
          nextState.answerCorrect = true;
        } else {
          nextState.answerCorrect = false;
        }

        return nextState;
      },
      () => {
        setTimeout(() => this.nextQuestion(), 750);
      }
    );
  };

  nextQuestion = () => {
    this.setState(state => {
      const nextIndex = state.activeQuestionIndex + 1;

      if (nextIndex >= state.totalCount) {
        return this.props.navigation.popToTop();
      }

      return {
        activeQuestionIndex: nextIndex,
        answered: false
      };
    });
  };

  render() {
    const questions = this.props.route.params("questions", []);
    const question = questions[this.state.activeQuestionIndex];

    return (
      <View
        style={[
          styles.container,
          { backgroundColor: this.props.route.params("color") }
        ]}
      >
        <StatusBar barStyle="light-content" />
        <SafeAreaView style={styles.safearea}>
          <View>
            <Text style={styles.text}>{question.question}</Text>

            <ButtonContainer>
              {question.answers.map(answer => (
                <Button
                  key={answer.id}
                  text={answer.text}
                  onPress={() => this.answer(answer.correct)}
                />
              ))}
            </ButtonContainer>
          </View>

          <Text style={styles.text}>
            {`${this.state.correctCount}/${this.state.totalCount}`}
          </Text>
        </SafeAreaView>
        <Alert
          correct={this.state.answerCorrect}
          visible={this.state.answered}
        />
      </View>
    );
  }
}

Then, when I try to go on and select the category: TypeError: _this.props.route.params is not a function. (In '_this.props.route.params("questions", [])', '_this.props.route.params' is an instance of Object)

I'm missing something here, but what?

Answer 1

Try accessing this way

constructor(props) {
    super(props)
    this.state = {
      ...
      totalCount: props.route.params.questions.length,
      .....
}