How to correctly add an if statement inside return statement in react?

Question

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.

Answer 1

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

Answer 2

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.