Title: How to Hide and show HTML based on a cookie existing or not in a React App
Tags: javascript;html;reactjs
Question: I have a React App that has a login system. When you log in, a cookie is created called &quot;Name&quot;. The issue is that when you are logged in, the &quot;Login&quot; button is still showing, and when you are logged out, the &quot;Logout&quot; button is still showing. In other words, the Login and Logout button are always showing, no matter what state you are in. I created this code shown below.
When the website loads, there is a function named &quot;check&quot; that checks if a cookie called Name exists. If it does, &quot;stuff&quot; gets defined to show the Logout button only. otherwise, if there is not a cookie named Name, then &quot;stuff&quot; gets defined to show the Login button only.
When I load the website, nothing shows up.
How is it possible (if it is) to show different HTML based on a cookie?
import React, { useState, useEffect } from &quot;react&quot;;
import ReactDOM from &quot;react-dom&quot;;
import { useCookies } from &quot;react-cookie&quot;;
export default function Grimm() {
const [cookies, setCookie] = useCookies([&quot;user&quot;]);
useEffect(() =&gt; {
check()
}, [])
let stuff;
function check() {
if (cookies.Name) {
let stuff = <Logout/&gt;;
} else if (!cookies.Name) {
let stuff = <login/&gt;
function Login() {
return (
<button&gt;
Login
</button&gt;
);
function Logout() {
return (
<button&gt;
Logout
</button&gt;
return (
<div&gt;
{stuff}
</div&gt;
);
P.S. this is also a test site, The buttons dont do anything, its something for me to work off of. Thanks!

Here is the accepted answer: you need to use the correct hook
right now you are doing it wrong, you are not storing the value of your cookie inside the components state.
you need to do something like this:
const [cookies, setCookie] = useState(useCookies([&quot;user&quot;]));
you need to somehow store the value of your cookie inside the state of your component
Comment for this answer: I appreciate the answer, but I think I might have thrown you off with the title.  I meant to say based on a cookie existing or not. I used a wrong choice of words there
Comment for this answer: it took me a while to get it working, but I was finally able to get it workin, thanks so much for your help!
Comment for this answer: the thing is even if you set the cookie correclty on user's login, your component would not be aware of the change of your cookie, your component is only aware of it's state changing.
Comment for this answer: so you need to store the user's login in your state and update your cookie too.
if user loggs in, you set the loginState to true, if he loggs out, you set the loginState to false, and you update your cookie too.


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2022:00:05/08/22', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><html><reactjs>', 'Title': 'How to Hide and show HTML based on a cookie existing or not in a React App', 'ViewCount': 153, 'id': 72158526, 'user_AboutMe': None, 'user_AccountId': 20906834.0, 'user_DisplayName': 'Grimm', 'user_Reputation': 43.0, 'user_Views': 12.0, 'user_id': 15437058.0}}