Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for React Conditional Rendering
Ahmed Radwan
Ahmed Radwan

Posted on

     

React Conditional Rendering

What is conditional rendering in React?

Conditional rendering is a key concept in React since it allows you to display some components or elements that depend on a specific condition.


When you use the ‘&&‘?

What’s on the right side of this sign is what you want to display or achieve and what’s on the left side is the condition you put to evaluate. If this condition is truthy, the right side will be executed.


When you use a ternary?

When you have two or more options you want to display, you can use the ternary operator to nest more conditions. However, for code readability, you should stick with two options.. If you find yourself needing to put more than two conditions, you should use the ‘if...else’ statement or ‘switch’.

Please note that this ternary can happen inside your function’s return, while the ‘if … else’ statement needs to go outside of the return in your function.


Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Hi, I am a web developer who is looking to learn and share new tech things everyday.
  • Location
    Ireland
  • Joined

More fromAhmed Radwan

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp