0

I'm triying to pass data from a validator custom hook component to my context.

My custom hook checkDB receive LoginData but fails when trying to pass a destructured variable to another function in my context

import { useContext, useState } from "react";
import validator from "validator";
import { LoginContext } from "./LoginContext";
import users from "./users.js";


const useValidator = () => {

//a bunch of another states and functions working fine


// function who receives data but not passing to another function in context

const checkDB =  (loginData) => {
    const errorNoFound = false;
    try {
      const { emailData, passwordData } = loginData;
      const found = users.find((user) => user.correo === emailData);
      if (found) {
        handlerUserLogged(emailData);
        return window.location.href = "/";
      } else {
        return errorNoFound = true;
      }
    } catch (error) {}


  return {
  
    checkDB,
   
  };
};
export default useValidator;

My login context doesn't receive the data from checkDB function neither update states

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

export const LoginContext = createContext([]);

function LoginContextProvider({ children }) {

  const [userData, setUserData] = useState('');
  const [isLogged, SetIsLogged] = useState(false);

  function handlerUserLogged({emailData}) {
    
    SetIsLogged(true);
    alert(isLogged)
    return setUserData(emailData);
  }

  return (
    <LoginContext.Provider value={{ userData, isLogged, setUserData, SetIsLogged,handlerUserLogged }}>
      {children}
    </LoginContext.Provider>
  );
}

export default LoginContextProvider;MY app

My app.js

import React from "react";
import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
import HomePage from "./components/HomePage/HomePage";
import LoginPage from "./components/LoginPage/LoginPage";
import RegisterPage from "./components/RegisterPage/RegisterPage";
import LoginContextProvider from "./meta/LoginContext";
import "./App.css";


function App() {
  return (
    <BrowserRouter>
      <LoginContextProvider >
        <div className="App">
          <Routes>
            <Route path="/" element={<HomePage />} />
            <Route path="/login" element={<LoginPage />} />
            <Route path="/crear-cuenta" element={<RegisterPage />} />
            <Route path="/*" element={<Navigate to="/" />} />
          </Routes>
        </div>
      </LoginContextProvider>
    </BrowserRouter>
  );
}

export default App;
  • Its hard to tell when we dont know the content of emailData but why don't you just not destructure it. instead do `function handlerUserLogged(emailData) {}` – Kay Oct 24 '22 at 19:42

0 Answers0