Render a component only if it is not already redendered

Let's say I have got an object like this which I'm using to create a material navbar in React:

const menu = {
   DASHBOARD: [
      {
         name: ViewPage1
         type: VIEW
      },
      {
         name: ViewPage2
         type: VIEW
      },
      {
         name: RunPage1
         type: RUN
      },
      {
         name: RunPage2
         type: RUN
      },
   ],
}

My goal is to render the "type" label (View or Run) just once. So have something like this:

----VIEW
ViewPage1
ViewPage2
----RUN
RunPage1
RunPage2

I tried like this:

 {Object.keys(menu).map((key) => (
          <>
            <Button>
              {key}
            </Button>
            <Menu>
              <div>           
                {menu[key].map((menuItem) => (
                  <TypeLabelComponent label={menuItem.type} size="small" variant="outlined" />
                  <MenuItem>
                      {menuItem.name}
                  </MenuItem>
                ))}
              </div>
            </Menu>
          </>
        ))}

But obviously, it renders the TYPE label every time he loops in the map. So my result is the following:

----VIEW
ViewPage1
----VIEW
ViewPage2
----RUN
RunPage1
----RUN
RunPage2

How can I handle this to render the TYPE label only if it is not already being rendered?

Render a component only if it is not already redendered

Good Question 0Comment Collection Report

0 Answer

angelo12 注册会员
2023-01-25 19:35

First aggregate the dashboard into object keys as type and values are array of names.

const menu = {
  DASHBOARD: [
    {
      name: "ViewPage1",
      type: "VIEW",
    },
    {
      name: "ViewPage2",
      type: "VIEW",
    },
    {
      name: "RunPage1",
      type: "RUN",
    },
    {
      name: "RunPage2",
      type: "RUN",
    },
  ],
};

const Component = () => {
  const data = menu.DASHBOARD.reduce((acc, curr) => {
    if (!acc[curr.type]) {
      acc[curr.type] = [];
    }
    acc[curr.type].push(curr.name);
    return acc;
  }, {});

  return (
    
      {Object.entries(data).map(([type, names]) => {
        return (
          
            {`--------${type}`}
            {names.map((name) => (
              {name}
            ))}
          
        );
      })}
    
  );
};

ReactDOM.render(, document.getElementById("app"));