Digamos que tengo un objeto como este que estoy usando para crear una barra de navegación de material en React:
const menu = { DASHBOARD: [ { name: ViewPage1 type: VIEW }, { name: ViewPage2 type: VIEW }, { name: RunPage1 type: RUN }, { name: RunPage2 type: RUN }, ], }Mi objetivo es representar la etiqueta de "tipo" (Ver o Ejecutar) solo una vez. Así que ten algo como esto:
----VIEW ViewPage1 ViewPage2 ----RUN RunPage1 RunPage2Intenté así:
{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> </> ))}Pero obviamente, muestra la etiqueta TYPE cada vez que recorre el mapa. Así que mi resultado es el siguiente:
----VIEW ViewPage1 ----VIEW ViewPage2 ----RUN RunPage1 ----RUN RunPage2¿Cómo puedo manejar esto para representar la etiqueta TYPE solo si aún no se está procesando?
Primero agregue el tablero en claves de objeto, ya que el tipo y los valores son una matriz de nombres.
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 ( <div> {Object.entries(data).map(([type, names]) => { return ( <div key={type}> <div>{`--------${type}`}</div> {names.map((name) => ( <div key={name}>{name}</div> ))} </div> ); })} </div> ); }; ReactDOM.render(<Component />, document.getElementById("app")); <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <div id="app"></div>