Quiero pasar accesorios del padre a varios componentes secundarios, pero finalmente aparece el error Cannot read properties of undefined (reading 'props') App.js:
render() { const {currentUser} = this.props return ( <div id="App" className='loader'> <BrowserRouter> <Routes> <Route path='women' element={<Women currentUser={currentUser} />} />Mujeres.js:
render() { const { isLoading } = this.state; if (isLoading) { return null; } const {currentUser} = this.props return ( <div> <div className='container mx-auto'> <HomeHeaderW style={{ backgroundColor: "#fff2e0" }} currentUser={currentUser} />InicioEncabezadoW.js:
function HomeHeaderW() { const {currentUser} = this.props const [isLogged, setLogged] = useState(false); useEffect(() => { if(currentUser) { setLogged(true) } });No sé por qué me sale el error indefinido, ¿tienes alguna idea sobre esto? ¿O lo estoy haciendo de la manera incorrecta?
HomeHeaderW es un componente basado en funciones ( Women y App son componentes basados en clases), no puede obtener accesorios de this.props
Deberías pasar tus apoyos a los parámetros.
function HomeHeaderW(props) { const { currentUser } = props; const [isLogged, setLogged] = useState(false); useEffect(() => { if (currentUser) { setLogged(true) } });Puede consultar este documento para una mejor comprensión.