"Advertencia: las funciones no son válidas como un elemento secundario de React. Esto puede suceder si devuelve un Componente en lugar de renderizar. O tal vez pretendía llamar a esta función en lugar de devolverla".
Tengo un componente de inicio simple en el que quiero representar dinámicamente los componentes en función de si el usuario ha iniciado sesión. Sin embargo, recibo la advertencia anterior de mi llamada de regreso, y me hace preguntarme qué otro patrón debería seguir. ¿Cómo mejorarías esto?
import React from 'react'; import Registration from './auth/Registration' import Login from './auth/Login' import Button from 'react-bootstrap/Button'; import { useNavigate } from 'react-router-dom' import axios from "axios"; const Home = props => { const navigate = useNavigate(); const handleSuccessfulAuth = (data) => { props.handleLogin(data); navigate('/dashboard'); } const handleLogoutClick = () => { axios .delete("http://localhost:3001/logout", { withCredentials: true }) .then(response => { props.handleLogout(); }) .catch(error => { console.log("logout error", error); }); } const loginComponent = () => { return( <Login handleSuccessfulAuth={handleSuccessfulAuth} /> ) } const reRouteToDash = () => { navigate('/dashboard'); } return ( <div> <h1>Status: {props.isLoggedIn}</h1> <Button onClick={() => handleLogoutClick()}>Logout</Button> { props.isLoggedIn ? reRouteToDash : loginComponent } </div> ); } export default HomeYa casi llegas, el problema es que estás enviando la definición de la función y tienes que llamarla. Cambia la línea a esto:
{ props.isLoggedIn ? reRouteToDash() : loginComponent() }Y eso debería solucionarlo.
También podría llamar a una sola función como esta:
{ renderComponent() }Y tener esto en la función:
const renderComponent = () => { if (props.isLoggedIn) return navigate('/dashboard') return <Login handleSuccessfulAuth={handleSuccessfulAuth} /> }