Question 289581 in React native Question posted in
The official React Native documentation can be found here.

React native – useState variable passed to child is not registered as function

Workin on a react native application, getting this error:
WARN Possible Unhandled Promise Rejection (id: 1): TypeError: setAuthenticated is not a function (it is undefined)

This is my AuthPage where setAuthenticated is called:

const AuthenticationPage = ( { setAuthenticated  }) => {

  const navigation = useNavigation();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [emailError, setEmailError] = useState(false);

  const onChangeEmail = email => setEmail(email);
  const onChangePassword = password => setPassword(password);
  //NEW SHIT BELOW UNTIL SIMULATED LOGIN

  // let setAuthenticated;
  // if (route && route.params) {
  //   setAuthenticated = route.params.setAuthenticated;
  // }
 


  const handleFormSubmit = async () => {
  
    const newPerson = {
       email: email,
        password: password 
      };


    if (!email.includes('@')) {
      setEmailError(true);
    }
    else {

      const response = await fetch(`${process.env.EXPO_PUBLIC_NGROK_URL}/api/login`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(newPerson),
      });

      if (response.ok) {

        const data = await response.json()
        console.log(authenticated)
        setAuthenticated(true); // Set authenticated state to true
        navigation.navigate('Restaurants', {
          customer_id: data.customer_id,

        }); // Navigate to HomeScreen
        return;
      }
    }
    // Simulating a successful login. You can replace this with your actual login logic.
  }

This is how I’m passing setAuthenticated in my app.js:

  const [authenticated, setAuthenticated] = useState(false);


            <Stack.Screen
              name="Authentication"
              component={AuthenticationPage}
              initialParams={{ setAuthenticated }}
            />

I’ve tried about everything I can think of, from having checks on route params, passing it as a parameter directly, etc. handleFormSubmit makes the fetch correctly, and receives the data with no problems, but as soon as it hits the "setAuthenticated(true)" , it dies.

Tags:

2

Answers


  1. 0

    According to passing parameters to route documentation of React Navigation, you pass it correctly but try to receive it as a usual component property.

    To resolve the issue, change the way of getting parameter in AuthenticationPage component to look like this:

    const AuthenticationPage = ({ route }) => {
  const { setAuthenticated } = route.params;

  // Rest of the code
}

    And above solution could work, but can you really pass state setter as a route parameter? No! In that case, just keep your approach of getting the state setter, but change the way of sending it to:

    <Stack.Screen name="Authentication">
  {(props) => <AuthenticationPage {...props} setAuthenticated={setAuthenticated} />}
</Stack.Screen>

    Then you receive it as you do currently:

    const AuthenticationPage = ( { setAuthenticated  }) => {
  // Rest of the code
}
    Login or Signup to reply.
  2. 0

    Params and props are different things, params we pass when we navigate to a page, or params can also be what we pass to a function. Props are the values that we pass when we are rendering a component.

    In this case we are passing the name value as a param to the function callFunctionWithName:

    callFunctionWithName(name);

    In this case, we are passing navigation params to ExamplePage as we navigate to it:

    navigation.navigate('ExamplePage', {setAuthenticated});

    and doing like this, to retrieve our navigation params inside ExamplePage, we have to destructure route from our Page and access it inside of params, like this:

    const ExamplePage = ({ route }) => {
    const {setAuthenticated} = route.params;  
}

    If you follow @MoDrazzz’s answer you should be able to make it work, but I would recommend using Context API for that.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search