title: route.params not passing properly in my React.js App
body: <p>I'm trying to figure out why my app isn't working properly. The basic premise is that that the user can choose the various types of cards they want to review. These are broken down into various types and are chosen via checkboxes. This array of settings is then passed to another screen where I take my data from firebase and convert it into an array. These arrays are then compared against one another and if the correct criteria is met, they are added to a new deck. This new deck is then rendered and moved through using a previous and next button. Any help would be appreciated.</p>
  
  <p>My current error is saying length is undefined because when building the deck I need to go through the initial deck of cards (the firebase array).</p>
  
  <pre><code>Current error:
  ×
  TypeError: Cannot read property 'length' of undefined
  buildDeck
  C:/Users/Langley/Desktop/ArticCards/screens/CardScreen.js:39
    36 |    let deck = new Array();
    37 | 
    38 |    for(var i = 0; i &lt; passDeck.length; i++){
  &gt; 39 |        for(var j = 0; j &lt; currentSettings.length; j++){
       | ^  40 |            if((passDeck.cType[i] == currentSettings[j].arType) &amp;&amp; (currentSettings[j].addCV == true)){
    41 |                deck.push(passDeck[i]);
    42 |            }
  </code></pre>
  
  <p>HomeScreen</p>
  
  <pre><code>import React, { useState, useEffect } from "react";
  import { StyleSheet, Text, Keyboard, TouchableOpacity, View, TouchableWithoutFeedback, Image } from "react-native";
  import { Button } from "react-native-elements";
  import { Feather } from "@expo/vector-icons";
  import { initArticDB, setupArticListener } from '../helpers/fb-settings';
  
  
  const HomeScreen = ({route, navigation}) =&gt; {
    const [ deck, setDeck] = useState([]);
  
    useEffect(() =&gt; {
      try {
        initArticDB();
      } catch (err) {
        console.log(err);
      }
      setupArticListener((items) =&gt; {
        setDeck(items);
      });
    }, []);
  
    useEffect(() =&gt; {
      if(route.params?.articCard){
        setCard({imageUrl: state.imageUrl, word: state.word, aType: state.aType, cType: state.cType, mastery: state.mastery})
      }
      if(route.params?.deck){
        setDeck({imageUrl: state.imageUrl, word: state.word, aType: state.aType, cType: state.cType, mastery: state.mastery})
      }
      if(route.params?.articType){
        setArticType({arType: state.arType, addCV: state.addCV})
      }
    }, [route.params?.articType, route.params?.deckeck, route.params?.articCard] );
  
  
    navigation.setOptions({
          headerRight: () =&gt; (
            &lt;TouchableOpacity
              onPress={() =&gt;
                navigation.navigate('Settings')
              }
            &gt;
              &lt;Feather
                style={styles.headerButton}
                name="settings"
                size={24}
                color="#fff"
              /&gt;
            &lt;/TouchableOpacity&gt;
          ),
          headerLeft: () =&gt; (
            &lt;TouchableOpacity
              onPress={() =&gt;
                navigation.navigate('About')
              }
            &gt;
              &lt;Text style={styles.headerButton}&gt; About &lt;/Text&gt;
            &lt;/TouchableOpacity&gt;
          ),
        });
  
      return(
        &lt;TouchableWithoutFeedback onPress={Keyboard.dismiss}&gt;
          &lt;View style={styles.container}&gt;
            &lt;Text style={styles.textmenu}&gt;Welcome to Artic Cards&lt;/Text&gt;
            &lt;Text style={styles.textsubmenu}&gt;Press Start to Begin!&lt;/Text&gt;
            &lt;Image source={require('../assets/5-snowflake-png-image.png')}
              style={{width: 300, height: 300, alignSelf: 'center'}}/&gt;
            &lt;Button
              title="Start"
              style={styles.buttons}
              onPress={() =&gt; navigation.navigate('Cards',
              {passDeck: deck})}
            /&gt;
            &lt;Button
              title="Progress"
              style={styles.buttons}
              onPress={() =&gt; navigation.navigate('Progress')}
            /&gt;
            &lt;Button
              title="Customize"
              style={styles.buttons}
              onPress={() =&gt; navigation.navigate('Customize')}
            /&gt;
          &lt;/View&gt;
        &lt;/TouchableWithoutFeedback&gt;
      );
  };
  
  const styles = StyleSheet.create({
    container: {
      padding: 10,
      backgroundColor: '#E8EAF6',
      flex: 1,
      justifyContent: 'center'
    },
    textmenu: {
      textAlign: 'center',
      fontSize: 30
    },
    textsubmenu:{
      textAlign: 'center',
      fontSize: 15
    },
    headerButton: {
      color: '#fff',
      fontWeight: 'bold',
      margin: 10,
    },
    buttons: {
      padding: 10,
    },
    inputError: {
      color: 'red',
    },
    input: {
      padding: 10,
    },
    resultsGrid: {
      borderColor: '#000',
      borderWidth: 1,
    },
    resultsRow: {
      flexDirection: 'row',
      borderColor: '#000',
      borderBottomWidth: 1,
    },
    resultsLabelContainer: {
      borderRightWidth: 1,
      borderRightColor: '#000',
      flex: 1,
    },
    resultsLabelText: {
      fontWeight: 'bold',
      fontSize: 20,
      padding: 10,
    },
    resultsValueText: {
      fontWeight: 'bold',
      fontSize: 20,
      flex: 1,
      padding: 10,
    },
  });
  
  export default HomeScreen;
  </code></pre>
  
  <p>SettingScreen</p>
  
  <pre><code>import React, {useState, useEffect} from 'react';
  import {StyleSheet, TouchableOpacity, View} from "react-native";
  import {Text, CheckBox} from "react-native-elements";
  import {FlatList } from "react-native-gesture-handler";
  //this is broken some how can't figure out why.
  
  const SettingsScreen = ({route, navigation}) =&gt;{
          //create a screen with checkbox fields. One for the consonant-vowel field and the other for the alphabet.
          //Both of which will be using flatlists preferably side by side
          //A card will only be counted if it meets both values being marked true (category and alpha)
      const [articType, setArticType] = useState([
          {arType: 'CV', addCV: true},
          {arType: 'VC', addCV: true},
          {arType: 'VV', addCV: true},
          {arType: 'VCV', addCV: true},
          {arType: 'CVCV', addCV: true},
          {arType: 'C1V1C1V2', addCV: true},
          {arType: 'C1V1C2V2', addCV: true},
      ]);
  
  
  
      navigation.setOptions({
          headerRight: () =&gt; (
              &lt;TouchableOpacity onPress={() =&gt; navigation.navigate('Home')}&gt;
              &lt;Text style={styles.headerButton}&gt; Cancel &lt;/Text&gt;
              &lt;/TouchableOpacity&gt;
          ),
          headerLeft: () =&gt; (
              &lt;TouchableOpacity
              onPress={() =&gt; {
                  // navigate back with new settings.
                  navigation.navigate('Home', {
                      currentSetting: articType
                  });
              }}
              &gt;
              &lt;Text style={styles.headerButton}&gt; Save &lt;/Text&gt;
              &lt;/TouchableOpacity&gt;
          ),
      });    
  
      const renderCVType = ({index, item}) =&gt;{
  
          return(
              &lt;CheckBox
                  title={item.arType}
                  checked={item.addCV}
                  onPress={() =&gt; {
                      let newArr = [... articType];
                      newArr[index] = {...item, addCV: !item.addCV};
                      setArticType(newArr);
                      console.log(newArr);
                  }}
              /&gt;
          )
      }
  
      return(
          &lt;View style={styles.container}&gt;
              &lt;Text style={styles.textmenu}&gt;Artic Type&lt;/Text&gt;
              &lt;Text style={styles.textsubmenu}&gt;Select what words to include based on their cononants and vowels&lt;/Text&gt;
              &lt;FlatList  
                  keyExtractor={(item) =&gt; item.arType}
                  data={articType}
                  renderItem={renderCVType}
              /&gt;
  
          &lt;/View&gt;
      )
  
  }
  
  
  const styles = StyleSheet.create({
      container: {
        padding: 10,
        backgroundColor: '#E8EAF6',
        flex: 1,
      },
      textmenu: {
        textAlign: 'center',
        fontSize: 30
      },
      textsubmenu:{
        textAlign: 'center',
        fontSize: 15
      },
  });
  
  export default SettingsScreen;
  </code></pre>
  
  <p>CardScreen</p>
  
  <pre><code>import React, { useState, useRef,   useEffect } from "react";
  import { StyleSheet, Text, View } from "react-native";
  import { Button, Card } from "react-native-elements";
  import { updateArtic } from "../helpers/fb-settings";
  import { State } from "react-native-gesture-handler";
  //Cannot navigate to this page, not sure why
  
  //general formatting and importing of the deck. Probably put shuffle function here with imported array
  //Next and previous buttons should bascially refresh page and give next or previous card
  //mastery probably will require setupArticListener (this needs clarification though)
  //Deck will be imported here and the information from SettingScreen will be imported here as well
  const CardScreen = ({route, navigation}) =&gt;{
  
      const { currentSettings, passDeck } = route.params;
      const renderCard = ({index, item}) =&gt; {
          &lt;View&gt;
              &lt;Card
              title={item.word}
              image={{uri: item.imageUrl}}&gt;
                  &lt;Text&gt; {item.cType} &lt;/Text&gt;
              &lt;/Card&gt;
          &lt;/View&gt;
      }
      const renderMastery = ({index, item}) =&gt;{
          return(
              &lt;CheckBox
                  title={'Mastered?'}
                  checked={!item.mastery}
                  onPress={() =&gt; {
                      updateArtic({ ...item, mastery: !item.mastery });
                  }}
              /&gt;
          )
      }
      function buildDeck(){
          let deck = new Array();
  
          for(var i = 0; i &lt; passDeck.length; i++){
              for(var j = 0; j &lt; currentSettings.length; j++){
                  if((passDeck.cType[i] == currentSettings[j].arType) &amp;&amp; (currentSettings[j].addCV == true)){
                      deck.push(passDeck[i]);
                  }
              }
          }
          return deck;
      }
  
      function nextCard(){
          var k = deck.indexOf();
  
          if( (k+1) &lt;= deck.length){
              return deck[k+1];
          } else{
              return deck[0];
          }
  
      }
  
      function previousCard(){
          var k = deck.indexOf();
  
          if( (k-1) &gt;= 0){
              return deck[k-1];
          } else{
              return deck[(deck.length - 1)];
          }
      }
  
      buildDeck();
  
      return(
          &lt;View&gt;
              &lt;Text&gt;Cards&lt;/Text&gt;
              {renderCard(deck)}
              &lt;View style={styles.row}&gt;
                  &lt;Button
                      title='Next'
                      onPress={
                          nextCard()
                      }
                  /&gt;
                  renderItem{renderMastery}
                  &lt;Button
                      title='Previous'
                      onPress = {
                          previousCard()
                      }
                  /&gt;
              &lt;/View&gt;
          &lt;/View&gt;
      )
  }
  
  const styles= StyleSheet.create({
      row: {
          flexDirection: 'row',
          flex: 1,
          marginBottom: 1
      },
  
  })
  
  export default CardScreen;
  </code></pre>