Click here to Skip to main content
15,041,264 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I am using react context to handle the state and also to avoid prop drilling. When the user clicks on the Login button, it triggers the functions passed from UserContext to update the new state e.g setLoggedIn(true), setToken(response.token) and setUserNotfound(false) but it is not updating the new state? Why the code is not updating the new state?

What I have tried:

UserContext

JavaScript
import React, { useState, useContext } from "react";

export const UserContext = React.createContext();
export const UserLoginContext = React.createContext();

export function useUserContext(){
  return useContext(UserContext)
}

export function useLoginContext(){
  return useContext(UserLoginContext)
}

export function UserProvider({ children }) {
  const [isLoggedIn, setLoggedIn] = useState(false);
  const [userNotFound, setUserNotFound] = useState(false);
  const [registerUser, setRegister] = useState(false);
  
  // Authentication
  const [token, setToken] = useState("");

  // userLogin
  function userLogin(data) {
    setLoggedIn(data);
  }

  // Token
  function userToken(res){
    setToken(res.token);
  }

  // Invalid User
  function userFound(data){
      setUserNotFound(data);
  }

  // Register User
  function registerNewUser(data){
    setRegister(data);
  }

  return (
    <UserContext.Provider
      value={{
        isLoggedIn,
        userNotFound,
        token,
        registerUser
      }}
    >
      <UserLoginContext.Provider value={{userLogin, userToken, userFound, registerNewUser}}>
        {children}
      </UserLoginContext.Provider>
    </UserContext.Provider>
  );
};



Login.jsx

JavaScript
<code>import React, { useState } from "react";
import { useHistory } from "react-router";
import { Container, Row, Col, Form, Button } from "react-bootstrap";
import { validateUser } from "../../api/User/Auth";
import { useTranslation } from "react-i18next";
import { useUserContext, useLoginContext } from "../../Context/UserContext"; 


const Login = ({ children }) => {
  let history = useHistory();


  const {  
    isLoggedIn,
    userNotFound,
    token
  } = useUserContext();


  const {userLogin, userToken, userFound} = useLoginContext();

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const { t } = useTranslation();



  function handleSubmit (e) {
    
    e.preventDefault();
    validateUser(email, password).then((res) => {
      console.log(res);
      if (res) {
        if(res.status){
        userLogin(true);
        userToken(res.token);
        userFound(false);
        console.log(isLoggedIn, userNotFound);
        console.log(`TOKEN: ${token}`);
        history.push("/admin");
      }
    }
    });
  };
   
  return (
    <>
      <Container className="login d-flex justify-content-center">
        <Row>
          <Col>
            <Form className="form">
              <Form.Group controlId="formBasicEmail">
                <Form.Label>{t("login.email")}</Form.Label>
                <Form.Control
                  type="email"
                  placeholder={t("login.e.text")}
                  size="lg"
                  value={email}
                  onChange={(e) => {
                    setEmail(e.target.value);
                  }}
                />
                {userNotFound ? (
                  <Form.Text className="text-danger">
                    Email Address Not Found
                  </Form.Text>
                ) : (
                  ""
                )}
              </Form.Group>

              <Form.Group controlId="formBasicPassword">
                <Form.Label>{t("login.password")}</Form.Label>
                <Form.Control
                  type="password"
                  placeholder={t("login.password")}
                  size="lg"
                  value={password}
                  onChange={(e) => {
                    setPassword(e.target.value);
                  }}
                />
                {userNotFound ? (
                  <Form.Text className="text-danger">
                    Invalid Password
                  </Form.Text>
                ) : (
                  " "
                )}
              </Form.Group>
              <Button variant="primary" type="submit" onClick={handleSubmit}>
              {t("nav.login")}
              </Button>
            </Form>
          </Col>
        </Row>
      </Container>
    </>
  );
};

export default Login;</code>
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900