How to hide a menu button on the login page

programming web dev
1

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

2

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.

3

Thanks John for your positive response

Let me try it and see

Thanks

4

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’}));
}
};

5

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.

6

Thanks John for your positive response !