Tengo una aplicación React que tiene un sistema de inicio de sesión. Cuando inicia sesión, se crea una cookie llamada "Nombre". El problema es que cuando está conectado, el botón "Iniciar sesión" todavía se muestra, y cuando está desconectado, el botón "Cerrar sesión" todavía se muestra. En otras palabras, el botón Iniciar sesión y Cerrar sesión siempre se muestra, sin importar en qué estado se encuentre. Creé este código que se muestra a continuación.

Cuando se carga el sitio web, hay una función llamada "verificar" que verifica si existe una cookie llamada Nombre. Si es así, "cosas" se define para mostrar solo el botón Cerrar sesión. de lo contrario, si no hay una cookie llamada Nombre, entonces "cosas" se define para mostrar solo el botón Iniciar sesión.

Cuando cargo el sitio web, no aparece nada. ¿Cómo es posible (si lo es) mostrar HTML diferente basado en una cookie?

 import React, { useState, useEffect } from "react"; import ReactDOM from "react-dom"; import { useCookies } from "react-cookie"; export default function Grimm() { const [cookies, setCookie] = useCookies(["user"]); useEffect(() => { check() }, []) let stuff; function check() { if (cookies.Name) { let stuff = <Logout/>; } else if (!cookies.Name) { let stuff = <login/> } function Login() { return ( <button> Login </button> ); } function Logout() { return ( <button> Logout </button> ); } return ( <div> {stuff} </div> ); } }

PD: este también es un sitio de prueba, los botones no hacen nada, es algo para mí con lo que trabajar. ¡Gracias!