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

Reactjs – Sidebar menus in react do not get updated until a hot build

I have a sidebar which is populated via an array of menu items. Below is the code for the data.jsx

import AdminPanelSettingsOutlined from "@mui/icons-material/AdminPanelSettingsOutlined";
import React, { useState, useEffect } from 'react';
import {
  HomeIcon,
  LayoutIcon,
  CalendarIcon,
  InvoiceIcon,
  UserIcon,
  RolesIcon,
  PagesIcon,
  AuthIcon,
  WizardIcon,
  ModalIcon,
} from "./Icons";
import keycloakService from "../KeycloakService"
export const SIDEBAR_DATA = [
  {
    id: 1,
    name: "Home",
    path: "/secured",
    icon:<HomeIcon/>,
    visibility: 'true'
  },
  {
    id: 2,
    name: "Administration",
    path: "/Administration",
    icon:<AdminPanelSettingsOutlined/>,
    visibility: await keycloakService.hasRole(['NexaAdmin']) == true ? 'true' : 'false'
    
  },
  
];

The data.jsx is being called in Sidebaritems.jsx

import React, { useState } from "react";
import { Link } from "react-router-dom";
import {
  ItemsList,
  ItemContainer,
  ItemWrapper,
  ItemName,
} from "./SidebarStyles";

import { dummyData } from "..";

const SidebarItems = ({ displaySidebar }) => {
  const [activeItem, setActiveItem] = useState(0);
  const [showItem, setShowItem] = useState(false);

  return (
    <ItemsList>
      {dummyData.map((itemData, index) => (
        
        itemData.visibility == 'true' && <ItemContainer
          key={index}
          onClick={() => setActiveItem(itemData.id)}
          className={itemData.id === activeItem ? "active" : ""}

        >

          <Link to={itemData.path}>
            <ItemWrapper>
              {itemData.icon}
              <ItemName displaySidebar={displaySidebar}>
                {itemData.name} {itemData.visibility}
              </ItemName>
            </ItemWrapper>
          </Link>
        </ItemContainer>
      ))}
    </ItemsList>
  );
};

export default SidebarItems;

My problem is the menu items are rendered without considering the visibility role in the data.jsx. It only get updated once I do a small change and save it, pretty much a hot update. Any ideas what could be wrong with my code. Can provide more code if needed

Tags:

2

Answers


  1. 0

    you should check the value of visibility variable (try console.log)

    because your promise may be unresolved and unresolved promises are truthy

    Login or Signup to reply.
  2. 0

    Sidebar Data

    import AdminPanelSettingsOutlined from "@mui/icons-material/AdminPanelSettingsOutlined";
import React from 'react';
import {
  HomeIcon,
  LayoutIcon,
  CalendarIcon,
  InvoiceIcon,
  UserIcon,
  RolesIcon,
  PagesIcon,
  AuthIcon,
  WizardIcon,
  ModalIcon,
} from "./Icons";
import keycloakService from "../KeycloakService";

export const getSidebarData = async () => {
  const hasAdminRole = await keycloakService.hasRole(['NexaAdmin']);
  return [
    {
      id: 1,
      name: "Home",
      path: "/secured",
      icon: <HomeIcon />,
      visibility: 'true'
    },
    {
      id: 2,
      name: "Administration",
      path: "/Administration",
      icon: <AdminPanelSettingsOutlined />,
      visibility: hasAdminRole ? 'true' : 'false'
    },
  ];
};

    fetch roles async

    import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import {
  ItemsList,
  ItemContainer,
  ItemWrapper,
  ItemName,
} from "./SidebarStyles";
import { getSidebarData } from "../data";

const SidebarItems = ({ displaySidebar }) => {
  const [activeItem, setActiveItem] = useState(0);
  const [sidebarData, setSidebarData] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const data = await getSidebarData();
      setSidebarData(data);
    };
    fetchData();
  }, []);

  return (
    <ItemsList>
      {sidebarData.map((itemData, index) => (
        itemData.visibility === 'true' && (
          <ItemContainer
            key={index}
            onClick={() => setActiveItem(itemData.id)}
            className={itemData.id === activeItem ? "active" : ""}
          >
            <Link to={itemData.path}>
              <ItemWrapper>
                {itemData.icon}
                <ItemName displaySidebar={displaySidebar}>
                  {itemData.name}
                </ItemName>
              </ItemWrapper>
            </Link>
          </ItemContainer>
        )
      ))}
    </ItemsList>
  );
};

export default SidebarItems;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search