React Native - Passing states from parent to child and to grandchild

Question

Here i'm trying to pass state from a parent component/screen to child and to grand child. At first, I tried it with a Text that is declared in a View and it work but when I delete the Text in the View and declare in the navBar it gives me an error.

And also sending, state from child to grandchild is not working even if I only declare the state in a View with a Text .( Just like I did on my first time )

Here's my code

table.js (Parent)

export default class tables extends Component {
    state = {
        data: [],
    }    
    fetchData = async () => {
        const response = await fetch("http://192.168.254.104:3308/table/");
        const json = await response.json();
        this.setState({ data: json })
    }    
    componentDidMount() {
        this.fetchData();
    }    
    render() {
        return (
            <View>
                <FlatList
                ....
                renderItem = {({ item }) => 
                    <TouchableOpacity
                    onPress = { () => this.props.navigation.navigate('Category', { tbl: item.tbl_id })}>
                        <Text>{ item.tbl_id }</Text>   // the data that will be pass.
                    </TouchableOpacity>
                }
                />
            </View>
        )
    }
}

Category.js (Child)

export default class Category extends Component {
    static navigationOptions = ({ navigation }) => (
        {
            headerLeft:
            <Text>Table NO: { this.state.tbl }</Text>   // navBar
        }
    );
    constructor(props){
    super(props)
        this.state = {
            data: [],
            tbl: this.props.navigation.state.params.tbl,
        };
    }
    render() {
        return (
            <View>
                <Text>{ Table NO: { this.state.tbl }</Text>  // But if I do it this way it's working fine.
                <FlatList
                ....
                renderItem = {({ item }) => 
                    <TouchableOpacity
                    onPress = { () => this.props.navigation.navigate('Dishes', { id: item.cat_id}, { tbl: item.tbl_id }) }>
                        <Text>{ item.cat_name }</Text>
                    </TouchableOpacity>
                }
                />
            </View>
        )
    }
}

Dishes.js (GrandChild)

export default class Dishes extends Component {
    static navigationOptions = ({ navigation }) => (
            {
                headerLeft:
                <Text>Table NO: { this.state.tbl }</Text>   // navBar
            }
        );
    constructor(props) {
        super (props)
        this.state = {
            tbl: this.props.navigation.state.params.tbl,
        }
    }
    render() {
        return (
            <View>
                <Text>Table NO: { this.state.tbl }</Text>  // In here, even if I do it this way it's not working. :-/
                <FlatList
                ....
                />
            </View>
        )
    }
}

Answer 1

In the onPress of TouchableOpacity in Category.js you pass 3 parameters to this.props.navigation.navigate , but it looks like you should pass 2. Try changing the line to this

onPress = {
    () => this.props.navigation.navigate("Dishes", {
        id: item.cat_id,
        tbl: item.tbl_id
    })
}

Answer 2

Try printing table id in place of

<Text>{ item.cat_name }</Text>

change with

<Text>{ item.tbl_id }</Text>

And check what's printing there, if the value is right it must pass to grand child class also as @hansn suggested

use it like

onPress = { () => this.props.navigation.navigate(
    'Dishes', { id: item.cat_id,  tbl: item.tbl_id }
)}

Answer 3

in Parent :

onPress = { () => this.props.navigation.navigate('Child', {

             params: { id: item.cat_id,  tbl: item.tbl_id }

          }
)}

in Child :

const {id, tbl} = this.props.navigation.getParam('params');

onPress = { () => this.props.navigation.navigate('GrandCHild', {

                 params: { id, tbl}

          }
)}

in GrandChild :

const {id, tbl} = this.props.navigation.getParam('params');