Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Menu's are not rendering properly in React JS

Since I am new to react js development, I am developing one react application that have a menu and dashboard components. I want to render the menu based on an user role. The user role where I kept from browser local storage which is set properly.
The menu component is below:

import { ReactSession } from 'react-client-session';
import dashboard from './dashboard';
import dashboard1 from './dashboard1';
import dashboard2 from './dashboard2';
import companies from './companies';
import investors from './investors';
import incubators from './incubators';

// ==============================|| MENU ITEMS ||============================== //

ReactSession.setStoreType("localStorage");
let role = ReactSession.get("role");
let menuItems = [];
{
    if (role == 3) {
        menuItems = {
            items: [dashboard1, companies]

        };
    }
    else if (role  == 2) {
        menuItems = {
            items: [dashboard, incubators]

        };
    }
    else if (role == 4) {
        menuItems = {
            items: [dashboard2, investors]

        };
    }
}
export default menuItems;

The role variable kept the status 2,3,4 based on user login but the menu items are properly rendered only after manually refresh. How to fix this issue?

Tags:

2

Answers


  1. 0

    I guess that you would need React Router, but it is kind of hard to tell, because you did not provide a full code.

    Login or Signup to reply.
  2. 0

    wrapt them in a function and call that function in a useEffect

    or wrap the condition in useEffect and depend the useEffect on role value

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search