Conditionally rendering in React with ternary operator

This is a common technique when you want to render one out of two components based on a condition (for example when a state or a prop changes). If you have multiple conditions i advise you to use switch.

In the below example, you can change the greeting text by clicking the button which will change the state of buttonClicked.

Link to the live demo

Comments

[Paul]

If you have a condition where you want to render something only if a condition is true (or false), you can do this:

{displayComponent &&
  <MyComponent />
}

Side note on accessibility, it would be helpful if you'd include some relevant alt text on that image. Better yet, display an actual code snippet instead of an image. Cheers!

[Nguyen Trong Duc Luong]

Thank you for your advise