Objects are not valid as a React child (found: object with keys {children}). If you meant to render a collection of children, use an array instead

Question

I am using context in react and having a problem to use it's props. Can anyone get a solution of it. Here is my code and error!! This is my useAuth.js code

const AuthContext = createContext();
export const AuthContextProvider = (props) => {
  const auth = Auth();
  return <AuthContext.Provider value={auth}>{props}</AuthContext.Provider>;
};


export const useAuth = () => useContext(AuthContext);
const Auth = () => {
  const [user, setUser] = useState(null);
  const provider = new firebase.auth.GoogleAuthProvider();

  const signInWithGoogle = () => {
    return firebase
      .auth()
      .signInWithPopup(provider)
      .then((res) => {
        const signedInUser = getUser(res.user);
        setUser(signedInUser);
        localStorage.setItem("hot-onion-user", true);
        return res.user;
      })
      .catch((err) => {
        console.log(err);
        setUser(null);
        return err.message;
      });
  };

And this is where I am using the context

<AuthContextProvider>
      <div className="App">
        <Router>
          <Header></Header>
          <Switch>
            <Route path="/login">
              <Login />
            </Route>
            <Route path="/signup">
              <Signup />
            </Route>
            <Route path="*">
              <NoMatch></NoMatch>
            </Route>
          </Switch>
        </Router>
      </div>
    </AuthContextProvider>

The error message is "Error: Objects are not valid as a React child (found: object with keys {children}). If you meant to render a collection of children, use an array instead."

luissmg luissmg · Accepted Answer · 2020-12-31T11:23:25

The problem is on this line:

return <AuthContext.Provider value={auth}>{props}</AuthContext.Provider>;

Instead of props, you need to put props.children because that's the content inside the provider.

Objects are not valid as a React child (found: object with keys {children}). If you meant to render a collection of children, use an array instead

1 Answers