I am trying to map objects in my array that is working great but becomes a problem when I try to map just one of the objects. My array code is as follows
const slides = [
{
index: 0,
title: 'Slide',
path: '/slide',
component: slide,
},
{
index: 1,
title: 'Slide1',
path: '/slide1',
component: slide1,
},
{
index: 2,
title: 'Slide12',
path: '/slide2',
component: slide2,
},
];
Here is my jsx code
{slides.map((item) => {
if (auth.verify(Roles.role1)) {
return (
<Tab
label={item.title}
key={item.index}
component={Link}
to={item.path}
/>
);
} else {
return (
<Tab
label={slides[0].title}
key={slides[0].index}
component={Link}
to={slides[0].path}
/>
)
}
})}
}
This code is working great for the first part of the if but for the else it is putting the first object of the array [0] three times because of the .map(item) so I have tried putting the if statement outside of it like this
if (auth.verify(Roles.role1)) {
{slides.map((item) => {
but this does not let me run the code and I'm unsure why. I am new to react and would appreciate anyway for the if statement to run correctly without iterating through all three array objects.
If I understand your problem correctly, you want to map all the slides, if auth auth.verify(Roles.role1) is true. The achieve this, you can do this in your jsx:
{auth.verify(Roles.role1) ? (
slides.map((item) => (
<Tab
label={item.title}
key={item.index}
component={Link}
to={item.path}
/>
))
) : (
<Tab
label={slides[0].title}
key={slides[0].index}
component={Link}
to={slides[0].path}
/>
)}
If auth is true, we map the items and display them, and if its not true, we only display the first one, your error, was that you mapped all the items anyways, so even if auth was false, the first slide would be displayed three times.
When you map an array, you are mapping something for each item in the array. This is why just providing else without a condition is returning the element 3 times (the number of items left in your array). Try using a condition to only return the first index.
return (
<div className={styles.container}>
<SideNavButton />
<div className={styles.card}>
<Box boxShadow={10}>
<Tabs value={selectedTab} className={styles.tabs}>
{slides.map((item) => {
if (auth.verify(Roles.role1)) {
return <Tab label={item.title} key={item.index} component={Link} to={item.path} />;
} else if (index === 0) {
return <Tab label={item.title} key={item.index} component={Link} to={item.path} />;
}
})}
</Tabs>
</Box>
</div>
</div>
);