React error "Objects are not valid as a React child (found: [object Promise])"

Question

I'm pretty new to React. I'm trying to create a private route handler with the new release of react-router-dom v6, so I need to verify whether the user is authenticated or not in order to know if return the protected route or redirect the user to the login route.

import { Navigate } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { isLogged } from '../helpers/isLogged';

export const PrivateRoute = async ({children}) => {

  // Check if the user is authenticated 
  const userData = useSelector( store => store.user.object);
  const logged = await isLogged(userData);

  return logged 
  ? children
  : <Navigate to="/login" />;
}

The thing is i'm getting some errors due to this, but mainly the object promise one.

What's going on? Thanks in advance!

check you children props' components. Some error may be present there. — Himanshu Singh, Dec 05 '21 at 07:00

Hugo F. · Accepted Answer · 2021-12-05T07:43:18.957

You can't declare a component async, because an async function returns a Promise, so when you'll use it won't be a component but a Promise object.

If you need to do an async operation you need to use the useEffect Hook :

  export const PrivateRoute = ({ children }) => {
  const [logged, setlLogged] = useState(false);
  useEffect(() => {
    isLogged(userData).then((res) => {
      setIsUserLogged(res);
    });
  }, []);
  // Check if the user is authenticated
  const userData = useSelector((store) => store.user.object);

  return logged ? children : <Navigate to="/login" />;
};

You can also use async/await inside the useEffect hook but it is a bit more tricky, i'll let you dig into that

score 0 · Answer 2 · answered Dec 05 '21 at 07:27

So, thanks to Hugo could figure it out.

I also used this: React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing

In a nutshell the solution was using useEffect and using a async function inside, and, while this is running, you could optionally rendering anything else, in my case "waiting...".

import { useEffect, useState } from 'react';
import { Navigate } from 'react-router-dom';
import { useSelector } from 'react-redux';
import { isLogged } from '../helpers/isLogged';

export const PrivateRoute = ({children}) => {

  const userData = useSelector((store) => store.user.object);

  const [logged, setLogged] = useState(false);
  const [checking, setChecking] = useState(true);

  useEffect(() => {
    const checkAuth = async () => {
      
       // Check if the user is authenticated
      isLogged(userData).then((res) => {
        setLogged(res);

        // sets checking variable in false so the component can be rendered.
        setChecking(false);
      });
    }
    checkAuth();
  }, [userData]);
 

  if(checking){
    // Renders 'wait' until isLogged is resolved with the data.
    return (<h1>Wait...</h1>);
  }
  return logged ? children : <Navigate to="/login" />
}

React error "Objects are not valid as a React child (found: [object Promise])"

2 Answers2