CODEWITHSUNDEEP
javascriptreactjsjsx
csaseymour
csaseymour

Reputation: 56

Reactjs (Functional Component) Conditional Rendering with OR statement

const App = () =>{
    const condition1 = true
    const condition2 = false
    return (
        <div>
            {condition1 || condition2 && <h1>condition met</h1>}
        </div>
    )
}

The code above only cares about condition2, condition1 is ignored. is there a way I can use the OR operator in my jsx? Also I've tried looking through this https://reactjs.org/docs/conditional-rendering.html and I can't find what I'm looking for.

Upvotes: 2

Views: 187

Answers (1)

Tarik
Tarik

Reputation: 597

Maybe you forgot to put parentheses?

const App = () =>{
    const condition1 = true
    const condition2 = false
    return (
        <div>
            {(condition1 || condition2) && <h1>condition met</h1>}
        </div>
    )
}

Upvotes: 5

Related Questions