CODEWITHSUNDEEP
react-nativereact-native-navigation
jammin0921
jammin0921

Reputation: 252

Is there a way to pass a state to a component that was passed as a prop?

I'm trying to pass term from the HomeStackScreen into the HomeScreen function that I've used to create a .Screen in my HomeStack. I've tried passing it as a prop and an initial parameter in HomeStack.Screen. I'm able to change the state and I can confirm that with console.log() below. Seems to be that my Home component is not re-rendering/updating after created but I'm not sure how to force that update. I'm not sure what logic I'm missing and would be very grateful if someone was able to point me in the right direction.

I've included my code, actual output at the console, and what I thought I was writing to the console below.

Any tips or pointers would be great. Thanks in advance. 


    import React, {useState}from 'react';
    import {createStackNavigator} from '@react-navigation/stack';
    import Home from '../screens/home';
    import HeaderLeft from '../components/headerLeft';
    import HeaderRight from '../components/headerRight';


    function HomeScreen({term}) {
        console.log('Made it here!'.concat(term))
        return (
            <Home />
        );
    }

    const HomeStack = createStackNavigator();

    function HomeStackScreen() {
        const [term, setTerm] = useState('First State');

        console.log(term);

        return (
            <HomeStack.Navigator>
                <HomeStack.Screen name=" " 
                component= {HomeScreen} initialParams = {{term}}
                    options = {{
                        headerStyle:{
                            backgroundColor: "#121212",
                            borderBottomColor:'#121212', 
                            height:105,
                            shadowColor:'transparent'
                        },
                        headerLeft: () => <HeaderLeft/>,
                        headerRight: () => <HeaderRight setTerm = {setTerm}/>,
                    }}/>
          </HomeStack.Navigator>
        )
    }

    export default HomeStackScreen;

Console: 

First State
Made it here!undefined
Second State

What I thought I was writing to the Console:

First State
Made it here!First State
Second State
Made it here!Second State

Upvotes: 1

Views: 94

Answers (2)

Lucas Matos
Lucas Matos

Reputation: 2918

The initial Params property can be access inside route.params object

route.params

Example:

  function HomeScreen({ navigation, route }) {
        console.log('Made it here!'.concat(route.params.term))
        return (
            <Home />
        );
    }

Example 2:

https://snack.expo.io/BRK9_n_Dj

Upvotes: 1

Hoang Hoang
Hoang Hoang

Reputation: 36

Assuming you're using react-navigation v5 there a change on pass params you can checkout here

On 

`function HomeScreen({term}) {
        console.log('Made it here!'.concat(term))
        return (
            <Home />
        );
    }`

Could you change it to 

`function HomeScreen({route: {
  params: { term },
},}) {
  console.log('Made it here!'.concat(term))
  return (
    <Home />
  );
}`

Upvotes: 1

Related Questions