React.Context returning undefined in React Native project

1

Hi - I submitted this same question in Stack Overflow so apologies to those that are seeing this twice. But the post did not get any traction there and I am just as stuck with the problem now as I was then.

This is the post copied/pasted here:

I have a React Native app which has 3 screens: parent , child-1 , child-2 . The parent screen has direct links to 2 screens: child-1 , child-2 . Child-1 screen has the code that fills in the state for a Variable X . Then Child-2 screen displays the values from Variable X .

So obviously I am running into a problem where if the user loads the app and goes straight from Parent to Child-2 , the app crashes because Variable X is empty (and actually does not even exist). I have tried two ways to fix this:

  1. React Context API; but this results in undefined Variable X no matter what route the user takes. Github code. ( Parent screen = WelcomeScreen.js , Child-1 = BuildPantry.js , Child-2 = ResultingRecipes.js )

This is the important code:

From WelcomeScreen.js :

    function WelcomeScreen(props) {
             const data = useContext(WinRecipeContext);
             console.log(data); //This returns undefined
         
             //more stuff

              }

From BuildPantry.js :

import WinRecipeContext from "./../context/winRecipeContext";

function BuildPantry(props) {

//a bunch of code that build the variables I need based on user choice

return (
    <WinRecipeContext.Provider value={"Placeholder: replace with actual data"}>
      <View>

//more React components to display

);
}

From winRecipeContext.js :

import React from "react";

const WinRecipeContext = React.createContext();
WinRecipeContext.displayName = "WinRecipeContext";

export default WinRecipeContext;
  1. I also tried to initialize a separate variable set in Parent that is fed by a callback function from Child-1 . But can I even do that?? I.e. load data in Parent from Child-1 component. Would I use a hook ( useEffect ) to load the data in as soon as Parent loads into view…?? Code for this is only on local drive but happy to upload if this is more promising…??

Help!

2

Hello there,

Why do you give the option of going from parent to child-2, if child-2 relies on options being chosen in child-1. This sounds like poor UX, as surely you would want the user to follow a flow of:

  1. Lands on parent, is directed to click on nav to child-1
  2. Lands on child-1, is directed to select options, clicks submit
  3. Lands on child-2, where data is displayed

Forgive me, if I am completely misunderstanding what your app is going for…

3

Hi @Sky020 - perfectly fair question.

Maybe I was getting ahead of myself but what I wanted was: a user creates a list (based on decisions made in Child-1) and that list gets saved and is viewable until they decide to make other decisions (again in Child-1). So I would want user to be able to jump straight to the list (in Child-2) whenever they want, even from Parent after they just launch app.

I don’t have any back-end so without creating user accounts, I was hoping to send an empty variable from Parent.

But maybe what I need to do is remove button in Parent (to Child-2) until I have built the back-end that allows me to save list for user and then load it up with initial app load…?

4

What is it you want to happen when there is no data, just to show an empty component with the two buttons? You can provide some defaults and map/use item conditionally.

Or use optional chaining.

const item = props.route.params?.item;

item?.winnerToPrint.map(...rest of code)

props.navigation.navigate('Pantry', item?.objOfCheckboxes)
5

Well, if the data you want on child-2 is user-filled, there is no way around it. @lasjorg has brought up a good idea, if you still want the same functionality - provide some default data to load, if none is passed along.