# How to hide a menu button on the login page

**URL:** https://forum.kirupa.com/t/how-to-hide-a-menu-button-on-the-login-page/638265
**Category:** web dev
**Created:** [May 23, 2018, 8:51am UTC](https://forum.kirupa.com/t/how-to-hide-a-menu-button-on-the-login-page/638265 "2018-05-23T08:51:58Z")
**Posts on this page:** 6
**Page:** 1

<div class="post-metadata">

### Author: ![123411](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/123411/32/9133_2.png) [@123411](https://forum.kirupa.com/u/123411)
#### Post date: [May 23, 2018, 8:51am UTC](https://forum.kirupa.com/t/how-to-hide-a-menu-button-on-the-login-page/638265/1 "2018-05-23T08:51:58Z")

</div>

Hello members, I would like to know how i can hide a menu button on the login page using reactjs so that the user can not be able to view and access the menu button until he/she login successfully.

your suggestion is welcome

thanks

---

<div class="post-metadata">

### Author: ![JohnHansenArtist](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/johnhansenartist/32/8958_2.png) [@JohnHansenArtist](https://forum.kirupa.com/u/JohnHansenArtist)
#### Post date: [May 24, 2018, 1:29am UTC](https://forum.kirupa.com/t/how-to-hide-a-menu-button-on-the-login-page/638265/2 "2018-05-24T01:29:24Z")

</div>

You would want to only load the menu button in the DOM when the state of the user login was authenticated and true, not just hide it. You can read about **state** on the react website, there are very easy to follow examples. I don’t know what you are using for the authentication within your app.

---

<div class="post-metadata">

### Author: ![123411](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/123411/32/9133_2.png) [@123411](https://forum.kirupa.com/u/123411)
#### Post date: [May 24, 2018, 5:20am UTC](https://forum.kirupa.com/t/how-to-hide-a-menu-button-on-the-login-page/638265/3 "2018-05-24T05:20:33Z")

</div>

Thanks John for your positive response

Let me try it and see

Thanks

---

<div class="post-metadata">

### Author: ![123411](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/123411/32/9133_2.png) [@123411](https://forum.kirupa.com/u/123411)
#### Post date: [May 24, 2018, 6:04am UTC](https://forum.kirupa.com/t/how-to-hide-a-menu-button-on-the-login-page/638265/4 "2018-05-24T06:04:30Z")

</div>

Hello John, when i look into my code, this is the code that i want to control, I update the state when the login has been success and i was thinking if i can add a boolean flag and then give the menu a class hide/show depending on if the user has successfully logged in but i don’t how i can do that, I need your help .

Here is the code

const Login = (props) =\> {  
const actions = {  
createUserSessionAction: props.createUserSessionAction,  
getUserAction: props.getUserAction,  
onSuccess: (session) =\> {  
console.log(‘Logging in…’);  
props.getProductsAction(session);  
props.history.push("/sale");  
props.main.setState(Object.assign({}, props.main.state, {location: ‘/sale’}));  
}  
};

---

<div class="post-metadata">

### Author: ![JohnHansenArtist](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/johnhansenartist/32/8958_2.png) [@JohnHansenArtist](https://forum.kirupa.com/u/JohnHansenArtist)
#### Post date: [May 24, 2018, 1:09pm UTC](https://forum.kirupa.com/t/how-to-hide-a-menu-button-on-the-login-page/638265/5 "2018-05-24T13:09:55Z")

</div>

If your menu’s state is false based on a functional state of user authentication it would then be possible to use a conditional on your menu element -

```
<div>
  { showMenu && <Menu />}
</div>

```

Though I believe your routes need to be in a logged in session if that menu is required to be private.

---

<div class="post-metadata">

### Author: ![123411](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/123411/32/9133_2.png) [@123411](https://forum.kirupa.com/u/123411)
#### Post date: [May 24, 2018, 1:34pm UTC](https://forum.kirupa.com/t/how-to-hide-a-menu-button-on-the-login-page/638265/6 "2018-05-24T13:34:10Z")

</div>

Thanks John for your positive response !