CODEWITHSUNDEEP
reactjsjsxreact-bootstrap
Oliver Watkins
Oliver Watkins

Reputation: 13499

Adding boolean values in JSX

I have a scenario where I want to add a simple boolean value in my JSX. It is just a flag to say something is active or not.

<NavItem href="#/gosomewhere" active >

I am unsure how to pass in the 'active' flag in JSX.

I thought this would work fine :

const active= location.pathname.match(/^\/gosomewhere/) ? "active" : "";

return(

                <NavItem eventKey={1} href="#/gosomewhere" {active} >
                    Go Somewhere
                </NavItem>
)

However I get this error :

Module build failed: SyntaxError: Unexpected token, expected ...

Do I somehow need to use the spread operator in this scenario?

Upvotes: 0

Views: 3253

Answers (2)

Thomas Sauvajon
Thomas Sauvajon

Reputation: 1700

Answer to "is active=true equivalent to just 'active' ?"

Yes, active={true} is equivalent to active. Just marking active is recommanded as by the W3C recommandation

I'm posting this as an answer because I don't have enough reputation to comment.

Upvotes: 1

madox2
madox2

Reputation: 51841

You can pass boolean values the same way as other props, simply use active={true|false}:

const active = location.pathname.match(/^\/gosomewhere/);
return(
   <NavItem eventKey={1} href="#/gosomewhere" active={active} >
     Go Somewhere
   </NavItem>
)

Upvotes: 3

Related Questions