Conditional Rendering

Sometimes you show a component. Sometimes you do not.

React has no v-if. You use JavaScript: if, &&, or a ternary.

If and return

Ternary for two options

You can return whole trees, not only strings.

&& for maybe show

If the left side is true, React renders the right side. If not, it renders nothing useful.

Careful with numbers. {count && <List />} hides List when count is 0, but also shows a 0 on the page.

Prefer {count > 0 && <List />} so the left side is a real boolean.

null means render nothing

Keep JSX readable

If a ternary nests more than once, pull variables out above the return.

Tip: Conditional rendering is just JavaScript. If you can write the if in a function, you can write it in a component.