Why My Component Doesn't Re-render Itself Even Tho I Used Useeffect?(react.js)

recently, I am making my web application with a react and I'm struggling with a small issue(not small for me) Below is my app.js and I want to conditional render NAV component by l

Solution 1:

You will want to lift the loginStatus state up to the App parent component so the state and updater function can be passed down to children components to read and/or update.

App

Move the loginStatus state to this parent component. Pass the loginStatus to the Nav component for it to handle its conditional rendering, and pass setLoginStatus to the Login component for it to update the state. Notice that the routes were reordered so they no longer need to specify the exact prop everywhere, they aren't wrapped with the Auth HOC as this likely creates a new component each render cycle, and now the Login component is rendered on the render prop so we can slip in additional props.

const [loginStatus, setLoginStatus] = useState(
  () => !!JSON.parse(localStorage.getItem("user")),
);

return (
  <><NavindexStatus={indexStatus}loginStatus={loginStatus} // <--passloginstatussetIndexStatus={setIndexStatus}setLoginStatus={setLoginStatus} // <--passupdater
    /><IndexindexStatus={indexStatus}setIndexStatus={setIndexStatus} /><Switch><Routepath="/login"render={props =><LoginPage {...props} setLoginStatus={setLoginStatus} />}
      />
      <Routepath="/calendar"component={Calendar} /><Routepath="/about"component={About} /><Routepath="/register"component={RegisterPage} /><Routepath="/"component={LandingPage} /></Switch></>
);

Nav

Remove the loginStatus state and use the passed loginStatus value and setLoginStatus function to update the state in the parent.

functionNav({ indexStatus, loginStatus, setLoginStatus, setIndexStatus }) {
  const history = useHistory();

  constlogoutHandler = () => {
    ...
    setLoginStatus(false); // <-- logged out
  };

  return loginStatus ? (
    ...
  )
  : (
    ...
  );
}

LoginPage

Access the setLoginStatus state updater function from props and set when user logs in successfully. Decorate the export with the Auth HOC (this should be done for all the components needing it).

functionLoginPage(props) {
  ...

  constonSubmitHandler=(e)=>{
    e.preventDefault();

    let body={
      email: Email,
      password: Password
    };

    dispatch(loginUser(body))
      .then(response=>{
        if(response.payload.loginSuccess){
          localStorage.setItem('user',response.payload.loginSuccess)
          props.setLoginStatus(true); // <-- set logged in
          props.history.push("/");
        } else {
          alert('login failed');
        }
      });
  }

  return (
    <>
      ...
    </>
  );
}

exportdefaultAuth(withRouter(LoginPage));

Update

The reason your components that aren't receiving passed props is because the Auth HOC isn't passing them through.

exportdefaultfunction(SpecificComponent, option, adminRoute = null) {
  ...
  functionAuthenticationCheck(props) { // <-- props
    ...
    return (
      <SpecificComponent />// <-- not passed through
    );
  }
  returnAuthenticationCheck
}

Should be

exportdefaultfunction(SpecificComponent, option, adminRoute = null) {
  ...
  functionAuthenticationCheck(props) { // <-- props
    ...
    return (
      <SpecificComponent {...props} />// <-- passed through
    );
  }
  returnAuthenticationCheck
}