Can I use multiple booleans for conditional rendering in React?

Question

I want to do something like the following in a React component:

<div>
    {this.props.isOpen && this.state.isReady && <div> Hello! </div>}
</div>

Is it possible to use multiple booleans for conditionally rendering components in React? Could this ever possibly render a boolean to the user?

As @Sag1v points out below, you can do it, but I recommend that you don't since it is best practice to keep logic out of views, makes it more confusing to read, and will result in a page jump assuming the props and state could update, satisfy the condition, and then the <div /> will appear out of nowhere — Max Millington
– Max Millington, Commented Dec 6, 2017 at 19:12

isherwood · Accepted Answer · 2022-06-23 16:33:15Z

7

You can do it. it will either return the jsx or null (Won't render anything).

Example when condition is true:

const App = () => (
  <div>
    {true && true && <div> Hello! </div>}
  </div>
);

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Example when condition is false:

const App = () => (
  <div>
    {true && false && <div> Hello! </div>}
  </div>
);

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

edited Jun 23, 2022 at 16:33

isherwood

61.4k16 gold badges122 silver badges173 bronze badges

answered Dec 6, 2017 at 18:07

Sagiv b.g

31.1k10 gold badges72 silver badges106 bronze badges

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

2 Comments

goscamp Over a year ago

Can I have conditional rendering like {true && true ? <Text>true</Text> : <Text>false</Text> } ? I am trying but it shows me both texts

goscamp Over a year ago

quick tip if you get something like this {false && true ? <Text>true</Text> : <Text>false</Text> } it will return text false but when you write {false && (true ? <Text>true</Text> : <Text>false</Text>) } (with brackets) it will return nothing. I wanted the second option and I couldnt understand why I get text false

Collectives™ on Stack Overflow

Can I use multiple booleans for conditional rendering in React?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related