对象作为 React 子级无效（找到：object 和键 {children}）。 如果您打算渲染一组孩子，请改用数组

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."

Answer 1

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.