Estoy mapeando una matriz de objetos en reaccionar. La matriz es la siguiente
const tabs = [ { index: 0, title: 'v1', path: '/v1', component: versionManager, }, { index: 1, title: 'v2', path: '/v2', component: version2Manager, }, { index: 0, title: 'v3', path: '/v3', component: version3Manager, }, ];He mapeado con éxito toda la matriz con este
{tabs.map((item) => { if (auth.verify(Roles.role1)) { return ( <Tab label={item.title} key={item.index} component={Link} to={item.path} /> );pero me gustaría agregar un else que solo mapee el primer objeto (v1) y todos sus elementos, algo similar a esto.
} else { return ( <Tab label={item.title} key={item.index} component={Link} to={item.path} /> ) }He probado cosas como item.title[0], item.index[0] ,etc.... pero da un error indefinido cada vez. ¿Alguien sabe la mejor manera de mapear solo el primer objeto en la declaración else? Gracias por adelantado.
He visto Obtener el primer objeto de una matriz de objetos en reaccionar, pero esto no pareció ser útil en mi caso.
item.title[0], item.index[0] no funcionará porque item es solo un objeto de la matriz de tabs . Lo que quieres es:
} else { return ( <Tab label={tabs[0].title} key={tabs[0].index} component={Link} to={tabs[0].path} /> ) }Desea obtener el primer elemento de la matriz de tabs , pero ha estado intentando acceder al primer elemento de las propiedades de la matriz como si las propiedades fueran matrices en sí mismas, y las tabs solo un objeto normal.
Entonces querrás usar tabs[0].title , tabs[0].index , etc.
El mapa siempre itera sobre todos los elementos de la matriz. Otra forma que puede probar es verificar primero si el usuario tiene el rol que necesita. Si no, simplemente devuelve la primera pestaña.
if(auth.verify(Roles.role1)){ return tabs.map((item) => { return (<Tab label={item.title} key={item.index} component={Link} to={item.path} />); } } else { return ( <Tab label={tabs[0].title} key={tabs[0].index} component={Link} to={tabs[0].path} />) }