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.

Jonas Hendel · Accepted Answer · 2021-08-17 20:08:23Z

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.

answered Aug 17, 2021 at 20:08

Jonas Hendel

5864 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Steve Over a year ago

Exactly what I was looking for, thank you!

Sabrina Mokerji · Accepted Answer · 2021-08-17 20:14:59Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related