Implementing conditional rendering – blank page being returned

A login state is being generated from the “LoginPage.js” code up to the “App.js” component so that I can implement conditional rendering based upon the login state which can be “true” or “false”.

I have attached the files below. My website still shows the login page and never renders the other conditional content I want it to render.

App.js file

import "./App.css";
import LoginPage from "./Login/LoginPage";
import NewPost from "./Posts/NewPost";
import Posts from "./Posts/Posts";
import PostList from "./Posts/PostList";
import { useState } from "react";

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() {
  let loggedIn = false;

  const submitLoginHandler = (ifLoggedIn) => {
    loggedIn= ifLoggedIn;
    console.log(loggedIn);

  };

  return (
    <div className="App">
      {!loggedIn ? (
        <LoginPage onSubmitLogin={submitLoginHandler}></LoginPage>
      ) : (
        <div>
          <NewPost></NewPost>
          <PostList items={expenses}></PostList>{" "}
        </div>
      )}
    </div>
  );
}

export default App;

LoginPage.js file

import React from "react";
import "./LoginPage.css";
import { useState } from "react";

export default function LoginPage(props) {

  const [loggedIn, setLoggedIn] = useState(false);

  const loginHandler = (e) => {
    e.preventDefault();
     setLoggedIn(true);
     props.onSubmitLogin(loggedIn);
  }
  return (
    <div>
      <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 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 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>
        
        <button type="submit" className="btn btn-primary" onClick={loginHandler} >
          Login now
        </button>
        <div className="custom-ending">
            Not registered yet? <span>Register →</span>
        </div>
      </form>
    </div>
  );
}

Answer

You need to useState in App instead of LoginPage.js.

It is because the state will be get if it is updated. React does not rerender if a value change like the way you define.

So you should send login state (true) when click login button, then In App you get it and parse it to state of App.js.

LoginPage.jsx

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

export default function LoginPage(props) {
  const loginHandler = () => {
    props.onSubmitLogin(true);
  };
  return (
    <div>
      <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 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 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>

        <button
          type="submit"
          className="btn btn-primary"
          onClick={loginHandler}
        >
          Login now
        </button>
        <div className="custom-ending">
          Not registered yet? <span>Register →</span>
        </div>
      </form>
    </div>
  );
}

And app.js

import LoginPage from "./LoginPage";
import { useState } from "react";

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 [loggedIn, setLoggedIn] = useState(false);
  const submitLoginHandler = (e) => {
    setLoggedIn(e);
    console.log(e);
  };

  return (
    <div className="App">
      {!loggedIn ? (
        <LoginPage onSubmitLogin={submitLoginHandler} />
      ) : (
        <div>Post to show</div>
      )}
    </div>
  );
}

export default App;

You can check complete answer here: https://codesandbox.io/s/clever-hermann-83048s

Hope this will help you !