Use conditional logic in an array map?

Question

Ok so I am using express-react-views as a templating engine and I am currently trying to make a working breadcrumb. On each route I pass a prop called "crumb" that is an array of the current location on the app. That array looks like this:

[
    {
        text: "Home",
        href:"/",
        active: false
    }, 
    {
        text: "Step2",
        href:`/page`,
        active: true
    }
]

Obviously this can be multiple steps down. The last step is the page you are on, so active is set to true. This is where my problem is. To render this on the page I am mapping this array to JSX like this:

const Breadcrumb = props => {
    return (
        <ol class="breadcrumb">
            {props.crumb.map(crumb =>
               <li class="breadcrumb-item"><a href={crumb.href}>{crumb.text}</a></li>
            )}
        </ol>
    )
}

This code works fine but what the active page should have the class "active" on it and should not have an "a" tag. So what I need to do it as it's mapping this array to check for the active:true value and then map a different element. I hope that makes sense.

Shivanshu Gupta · Accepted Answer · 2020-06-30 18:25:27Z

2

Hi you can try this out if you want both active and inactive links to be shown:

const Breadcrumb = props => {
    return (
        <ol class="breadcrumb">
            {props.crumb.map(crumb =>
               crumb.active ? <li class="breadcrumb-item"><a href={crumb.href}>{crumb.text}</a></li> : <li class="breadcrumb-item">{crumb.text}</li>
            )}
        </ol>
    )
}

if you only want to show active links then you can use:

 const Breadcrumb = props => {
        return (
            <ol class="breadcrumb">
                {props.crumb.filter(item => item.active).map(crumb =>
                   <li class="breadcrumb-item"><a href={crumb.href}>{crumb.text}</a></li>
                )}
            </ol>
        )
    }

Inside map you can check crumb.active, so it will either return true or false and based on that you can return respective element.

edited Jun 30, 2020 at 18:25

answered Jun 30, 2020 at 18:22

Shivanshu Gupta

3242 silver badges9 bronze badges

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

1 Comment

Keith Over a year ago

You maybe don't need the not, active doesn't need the a link.

Ravi Kukreja · Accepted Answer · 2020-06-30 18:26:15Z

1

Is this what you want

const Breadcrumb = props => {
    return (
        <ol class="breadcrumb">
            {props.crumb.map(crumb => {
                if(crumb.active)
                    return <li class="breadcrumb-item active"></li>
                else
                    return <li class="breadcrumb-item"><a href={crumb.href}>{crumb.text}</a></li>               
            })}
        </ol>
    )
}

answered Jun 30, 2020 at 18:26

Ravi Kukreja

6471 gold badge8 silver badges18 bronze badges

1 Comment

Logan B Over a year ago

This also works. I tried the exact same thing but it was giving all types of errors so I figured that it wasn't possible to do it this way. I must have had it wrong somewhere along the line. Thank you.

Collectives™ on Stack Overflow

Use conditional logic in an array map?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related