0
Follow
0
View

Render a component only if it is not already redendered

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"));



About the Author

Question Info

Publish Time
2023-01-25 19:35
Update Time
2023-01-25 19:35