Estoy recibiendo un error: "Login.js: 12 Uncaught (en promesa) TypeError: No se pueden leer las propiedades de undefined (leyendo 'setIsAuth')"
Aquí está mi Login.js
import React from 'react'; import { auth, provider } from '../firebaseconf'; import { signInWithPopup } from 'firebase/auth'; import { useNavigate } from 'react-router-dom'; function Login({ setIsAuth }) { let navigate = useNavigate(); const singInWithGoogle = () => { signInWithPopup(auth, provider).then((result) => { localStorage.setItem("isAuth", true); setIsAuth(true); navigate("/"); }); }; return ( <div> <button onClick={singInWithGoogle}>Sign in with Google</button> </div> ); } export default Login;Y ahí está mi App.js
import React, { Component } from 'react'; import './css/main.css'; import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'; import Home from './pages/Home'; import CreatePost from './pages/CreatePost'; import Login from './pages/Login'; class App extends Component { constructor(props) { super(props); this.state = { isAuth: false, setIsAuth: false }; } render() { return ( <Router> <nav> <Link to="/">Home</Link> <Link to="/createpost"> Create New Post</Link> {!this.state.isAuth && <Link to="/login">Login</Link>} </nav> <Routes> <Route path="/" element={<Home />} /> <Route path="/login" element={<Login setIsAuth={this.state.setIsAuth} />} /> <Route path="/createpost" element={<CreatePost />} /> </Routes> </Router> ); } } export default App;creo que ya lo definí en App.js en el constructor, busco tu ayuda, gracias
En login.js está usando setIsAuth como si fuera una función pero no es una función, es una variable configurada como false en su App.js Para cambiar el valor de this.state.setIsAuth , debe hacer algo como esto:
App.js signIn = () => { this.setState({ setIsAuth: true }); } <Route path="/login" element={<Login setIsAuth={this.signIn} />} /> Login.js signInWithPopup(auth, provider).then((result) => { localStorage.setItem("isAuth", true); setIsAuth(); navigate("/"); });