I think I need to pass props to child component?

Question

The commented section of the code was working as intended, but I want to dynamically build this screen, so I have attempted to take the commented code out and put it in its own .js file.

Clearly I am doing something wrong because I'm now hitting an issue with props.navigation.navigate being undefined. Any insight is greatly appreciated!

This code functions correctly if you were to uncomment and remove 'FirstKey'

    import React from 'react';
    import { ScrollView, View, StyleSheet, Image } from 'react-native';

    import HomeButton from '../components/HomeButton';
    import FuncButton from '../components/FuncButton';
    import TextBold from '../components/TextBold';
    import TextRegular from '../components/TextRegular';

    import FirstKey from '../components/environments/FirstKey';

    const FirstKeyScreen = props => {

        /*
        // Temporary Array of Names
        var firstKeyArray = [ 
            "THE BLUE TENT", 
            "THE SACRED BREAT", 
            "LEAF IN THE WIND",
            "TOUCH OF LIGHT",
            "THE WATERFALL",
            "CAVE AND CARVING STONE",
            "THE GREAT RAVINE" ];

        createFirstKeyFuncButtons = () => {
            let funcButtons = [];
            for (let i = 0; i < firstKeyArray.length; i++) {
                funcButtons.push(<FuncButton key={i} title={firstKeyArray[i]} onPress={() => {
                            props.navigation.navigate('Player', { title: firstKeyArray[i] })}}
                        />);

            }
            return funcButtons;
        }
        */

        return (
            <ScrollView>
                <View style={styles.screen}>
                    <View style={styles.buttonContainer}>
                        <HomeButton style={{width: 150, height: 150}} onPress={() => {
                            props.navigation.navigate({routeName: 'Home'})}}
                        />
                    </View>
                    <View>
                        <FirstKey />
                        {/*
                        <TextBold style={styles.titleFont}>FIRST KEY ENVIRONMENTS</TextBold>
                        {this.createFirstKeyFuncButtons()}
                        */}
                    </View>
                </View>
            </ScrollView>
        );
    };

    const styles = StyleSheet.create({
        screen: {
            flex: 1,
            paddingBottom: 10
        },
        buttonContainer: {
            marginTop: 20,
            alignItems: 'center',
        },
        titleFont: {
            textAlign: 'center',
            fontSize: 32,
            paddingBottom: 20,
            paddingTop: 50
        }
    });

    export default FirstKeyScreen;

Here is my attempt to yank that code out and put it in it's own file (FirstKey.js)

    import React from 'react';
    import { StyleSheet, View } from 'react-native';

    import FuncButton from '../FuncButton';
    import TextBold from '../TextBold';
    import TextReguar from '../TextRegular';

    const FirstKey = props => {

        // Temporary Array of Names
        var firstKeyArray = [ 
            "THE BLUE TENT", 
            "THE SACRED BREAT", 
            "LEAF IN THE WIND",
            "TOUCH OF LIGHT",
            "THE WATERFALL",
            "CAVE AND CARVING STONE",
            "THE GREAT RAVINE" ];

        createFirstKeyFuncButtons = () => {
            let funcButtons = [];
            for (let i = 0; i < firstKeyArray.length; i++) {
                funcButtons.push(<FuncButton key={i} title={firstKeyArray[i]} onPress={() => {
                    props.navigation.navigate('Player', { title: firstKeyArray[i] })}}
                />);

            }
            return funcButtons;
        }

        return (
            <View>
                <TextBold style={styles.titleFont}>FIRST KEY ENVIRONMENTS</TextBold>
                {this.createFirstKeyFuncButtons()}
            </View>
        );
    }

    styles = StyleSheet.create({
        titleFont: {
            textAlign: 'center',
            fontSize: 32,
            paddingBottom: 20,
            paddingTop: 50
        }
    });

    export default FirstKey;

My assumption is that the props being called inside of the FirstKey.js file is pointing to itself and no to the one in FirstKeyScreen.js I imagine the solution is staring me in the face, but I just dont see it. XD

Answer 1

onPress={() => { props.navigation.navigate('Player', { title: firstKeyArray[i] })}}

first you pass wrong way !

setp 1 your array firstkeyArray[i] push in some array

ex: var temp=[]

  for (let i = 0; i < firstKeyArray.length; i++) {
    ->    temp.push(firstKeyArray[i]); 
       funcButtons.push(<FuncButton key={i} title={firstKeyArray[i]} onPress={() => {
    ->               props.navigation.navigate('Player', { title: temp })}}
                />);

Answer 2

Try: const FirstKey = ({navigation}) => {... and then navigation.navigate(... without props.

and:

<View>
                        <FirstKey navigation={props.navigation} /> <---CHANGE
                        {/*
                        <TextBold style={styles.titleFont}>FIRST KEY ENVIRONMENTS</TextBold>
                        {this.createFirstKeyFuncButtons()}
                        */}
                    </View>