Reactjs (Functional Component) Conditional Rendering with OR statement

Question

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.

Do you want to group the OR?: (condition1 || condition2) && <h1>...</h1> — Nick Parsons
– Nick Parsons, Commented Jan 31, 2022 at 8:00
@NickParsons That's exactly what I was looking for. Thank you very much! — csaseymour
– csaseymour, Commented Jan 31, 2022 at 8:03

Tarik · Accepted Answer · 2022-01-31 08:02:20Z

5

Maybe you forgot to put parentheses?

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

answered Jan 31, 2022 at 8:02

Tarik

6075 silver badges10 bronze badges

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

Collectives™ on Stack Overflow

Reactjs (Functional Component) Conditional Rendering with OR statement

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related