I'm trying to re-write my existing code which was making use of props chaining with the help of React Context API

I will include the context file and other important files aswell I have been stuck since an hour trying to figure out where I went wrong but unable to figure it out

App.js file

import "./App.css";
import { useContext } from "react";
import LoginPage from "./Login/LoginPage";
import NewPost from "./Posts/NewPost";
import PostList from "./Posts/PostList";
import Signup from "./Signup/Signup";
import AuthContext from "./store/auth-context";
import { AuthContextProvider } from "./store/auth-context";

const expenses = [
  {
    name: "Lakshay Gupta",
    content:
      " Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.",
    posted: "5mins ago",
    comments: "16 comments",
  },
  {
    name: "Naman Sukhija",
    content:
      " Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.",
    posted: "1hour ago",
    comments: "24 comments",
  },
  {
    name: "William Harris",
    content:
      " Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint. Velit officia consequat duis enim velit mollit. Exercitation veniam consequat sunt nostrud amet.",
    posted: "3mins ago",
    comments: "29 comments",
  },
];

function App() {
  const ctx = useContext(AuthContext);
  return (
    <AuthContextProvider className="App">
      {!ctx.isLoggedIn && <LoginPage></LoginPage>}
      {ctx.isLoggedIn && (
        <div className="posts-area">
          {ctx.registerIsShown && <Signup></Signup>}
          <NewPost></NewPost>
          <PostList items={expenses}></PostList>{" "}
        </div>
      )}
    </AuthContextProvider>
  );
}

export default App;

auth-context.js file

import React from "react";
import { useState } from "react";

const AuthContext = React.createContext({
  isLoggedIn: false,
  registerIsShown: false,
  onLogin: (email,pass) => {}, 
  onShow: () => {} ,
  onHide: () => {}
});

export const AuthContextProvider = (props) => {
  const [isLoggedIn, setLogin] = useState(false);

  const submitLoginHandler = () => {
    setLogin(!isLoggedIn);
  };

  const [registerIsShown, setRegisterIsShown] = useState(false);

  const showRegisterHandler = () => {
    setRegisterIsShown(true);
  };

  const hideRegisterHandler = () => {
    setRegisterIsShown(false);
  };

  return (
    <AuthContext.Provider
      value={{
        isLoggedIn: isLoggedIn,
        registerIsShown: registerIsShown,
        onLogin: submitLoginHandler,
        onShow: showRegisterHandler,
        onHide:  hideRegisterHandler
      }}
    />
  );
};
export default AuthContext;

Login.js file

import React from "react";
import "./LoginPage.css";
import AuthContext from "../store/auth-context";
import { useContext } from "react";

export default function LoginPage(props) {
const loginCtx = useContext(AuthContext);
  return (
    <div className="loginpage">
      <form className="form-dimensions">
          <div className="mb-4 custom-heading">
              WELCOME BACK
          </div>
          <div className="mb-4 custom-subheading">
              Login into your account
          </div>
        <div className="mb-3">
          <label htmlFor="exampleInputEmail1" className="form-label email-custom-login form-color">
            Email or Username
          </label>
          <input
            type="email"
            className="form-control"
            id="exampleInputEmail1"
            aria-describedby="emailHelp"
            placeholder="Enter your email or username"
          />
          
        </div>
        <div className="mb-3">
            <div className="label-inline">
          <label htmlFor="exampleInputPassword1" className="form-label form-color password-custom-login label-inline">
            Password                                     
          </label>
          <label htmlFor="exampleInputPassword2" className="forgot-password-custom form-label form-color label-inline">
              Forgot password?
          </label>
            </div>
          
          
          <input
            type="password"
            className="form-control"
            id="exampleInputPassword1"
            placeholder="Enter your password"
          />
        </div>
        
        {console.log(loginCtx)}
        <button type="submit" className="btn btn-primary" onClick={loginCtx.onLogin} >
          Login now
        </button>
        <div className="custom-ending">
            Not registered yet? <span>Register →</span>
        </div>
      </form>
    </div>
  );
}

CodePudding user response：

I believe this is because your Auth Context provider does not render its children at all. You should render children in your return statement, like so:

return (
    <AuthContext.Provider
      value={{
        isLoggedIn: isLoggedIn,
        registerIsShown: registerIsShown,
        onLogin: submitLoginHandler,
        onShow: showRegisterHandler,
        onHide:  hideRegisterHandler
      }}
    >{props.children}</AuthContext.Provider>
  );