Conditional Rendering and Lists

Part of the React course

Almost every screen you have ever used shows one thing instead of another depending on some condition: a "you have new messages" banner that only appears when there are new messages, a spinner that only shows while something is loading. And almost every screen shows more than one of something: a list of orders, a grid of products, a feed of posts.

Picture a doorman standing in front of a room. Before letting anyone through, he checks exactly one thing. If the check passes, the person walks in. If it fails, nothing happens at all, no explanation, no placeholder, just silence and a closed door. That is exactly the job of && (logical AND) inside a JSX expression: when you write condition && <SomeElement />, React renders <SomeElement /> only if condition is...