React Native conditional rendering "nothing was returned from render"

Question

So I am trying to conditionally render my drawer menu. I have this display component

const Display = () => {
  const getData = async () => {
    try {
      const value = await AsyncStorage.getItem('loggedIn');

      if (value !== null) {
        let check4Login = value === 'true';
        if (check4Login === true) {
          console.log('logged in user ');
          return (
            <NavigationContainer>
              <Drawer.Navigator initialRouteName="Home">
                <Drawer.Screen name="Home" component={HomeArea} />
                <Drawer.Screen name="Login" component={LoginPage} />
                <Drawer.Screen name="User Dashboard" component={MyAccount} />
                <Drawer.Screen name="Settings" component={Settings} />
                <Drawer.Screen name="Logout" component={Logout} />
              </Drawer.Navigator>
              <StatusBar barStyle="dark-content" />
            </NavigationContainer>
          );
        } else {
          console.log('logged out user ');
          return (
            <NavigationContainer>
              <Drawer.Navigator initialRouteName="Home">
                <Drawer.Screen name="Home" component={HomeArea} />
                <Drawer.Screen name="Login" component={LoginPage} />
                <Drawer.Screen name="User Dashboard" component={MyAccount} />
                <Drawer.Screen name="Settings" component={Settings} />
                <Drawer.Screen name="Logout" component={Logout} />
              </Drawer.Navigator>
              <StatusBar barStyle="dark-content" />
            </NavigationContainer>
          );
        }
      }
    } catch (e) {
      // error reading value
    }
  };

  getData();
};

and in this component I am checking for if the user is currently logged in, then if the user is logged in, I am returning the proper drawer menu.

Then I am calling the display component

const App = () => {
  checkLogin();

  return <Display />;
};

here to be displayed. But for some reason I am getting the error "Nothing was returned from render" even tho the code is getting to the returns like it should. For example right now I get the console.log "logged in user", but it does not seem to see the return I am assuming hence the error. Am I doing something wrong? Would appreciate any suggestions, thanks so much =]

The problem is that `getData` is asynchronous, so you can't just rely on the `getData` for the render. You need to return something immediately (synchronously), then in the async operation you can for example update a state value that makes your component rerender. — 5eb, Aug 30 '20 at 12:39
Also you probably want to execute the async operation inside a useEffect hook, so you can make it only execute once after the component mounts. You can look at this for reference https://stackoverflow.com/questions/56838392/how-to-call-an-async-function-inside-a-useeffect-in-react. — 5eb, Aug 30 '20 at 19:21

React Native conditional rendering "nothing was returned from render"

0 Answers0