Real interfaces change shape with the data. The Watchlist shows a “Watched” badge on some movies but not others, an encouraging message when the list is empty, and a disabled Add button until you type a title. None of that needs special React syntax. It’s plain JavaScript deciding which JSX to return, and there are three tools for it.
\nWhen a component shows something entirely different in one case, handle that case first and return:
\nexport default function MovieList({ movies }) {\n if (movies.length === 0) {\n return <p className=\"empty\">Nothing to watch yet. Add a movie above.</p>;\n }\n\n return (\n <ul>\n {movies.map((movie) => (\n <li key={movie.id}>{movie.title}</li>\n ))}\n </ul>\n );\n}The empty case is dealt with in two lines, and the rest of the function only worries about the normal case. This is the most readable pattern, so reach for it first. (The map and key are the topic of the next lesson.)
A component can also return null to render nothing at all:
function WatchedBadge({ watched }) {\n if (!watched) return null;\n return <span className=\"badge\">Watched</span>;\n}Inside JSX, where you can’t write if, use the conditional operator for a choice between two outputs:
<p className=\"status\">\n {movie.watched ? 'Watched' : 'To watch'}\n</p>It works for elements too: {isEditing ? <TitleInput /> : <h2>{title}</h2>}. Keep ternaries short. Once you nest one ternary inside another, or the branches run to several lines each, move the decision into a variable above the return, or into its own small component.
&&: something or nothingWhen the alternative is “nothing”, the logical AND operator is shorter than a ternary with null:
<li>\n {movie.title}\n {movie.watched && <span className=\"badge\">Watched</span>}\n</li>JavaScript evaluates a && b to a if a is falsy, otherwise to b. When movie.watched is false, the expression is false, and React renders nothing for false. When it’s true, you get the badge.
Conditions aren’t only about whole elements. Attributes take expressions too:
\n<li className={movie.watched ? 'movie movie-watched' : 'movie'}>\n {movie.title}\n</li>\n\n<button disabled={title.trim() === ''}>Add</button>\n\n<button aria-pressed={filter === 'watched'}>Watched</button>The third one matters for accessibility: aria-pressed tells screen reader users which toggle button is active, which a color change alone doesn’t. When a value is false or null for a boolean attribute like disabled, React leaves it off the element.
All three patterns produce the same kind of result, so the choice is about readability. A rule of thumb that holds up well in code review:
\n&& with a real boolean on the left.When you notice yourself writing a ternary inside a ternary, or an && chain with three conditions, stop and give the logic a name. Either compute a variable (const status = …) above the return, or extract a small component such as WatchedBadge that hides the decision inside itself. The parent then reads like a sentence: title, badge, actions.
Order matters with early returns, too. Put the cases that make the rest impossible first. If a movie list can be loading, failed or empty, check them in that order, so the final return only ever deals with real data.
There’s an important difference between these two:
\n{showWatched && <WatchedPanel />}\n<div hidden={!showWatched}>\n <WatchedPanel />\n</div>The first removes WatchedPanel from the tree when the condition is false. React unmounts it: its DOM goes away and any state inside it, such as text typed into an input, is destroyed. When it comes back, it starts fresh. The second keeps it mounted and only hides its wrapper (the HTML hidden attribute works like display: none), so the state survives.
Most of the time you want the first; there’s no reason to keep invisible UI alive. Choose hiding when the user expects their in-progress work inside the hidden part to still be there, as in tabs with half-filled forms.
\n\nNext, you’ll render the whole movie list from data with map, and learn why React keeps asking you for a key.
return for whole alternative screens, a ternary for one of two things, and && for something or nothing.","A component can return null to render nothing at all.","{count && <List />} renders a literal 0 when count is 0; compare explicitly with count > 0 &&.","Conditions can drive attributes too, such as className, disabled and aria-pressed.","Not rendering a component removes it and its state; hiding it with CSS keeps both."],"further":[{"title":"Conditional Rendering","url":"https://react.dev/learn/conditional-rendering"},{"title":"Logical AND (&&) on MDN","url":"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND"}],"quiz":[{"q":"movies is an empty array. What does <div>{movies.length && <MovieList movies={movies} />}</div> show?
&& returns the left side when it’s falsy, and the left side here is the number 0."},{"text":"An empty list.","why":"MovieList never renders, because 0 && … stops at 0."},{"text":"An error about rendering a number.","why":"Numbers are valid React children, which is exactly why the 0 shows up instead of an error."},{"text":"The character “0”.","why":"Correct. 0 && x evaluates to 0, and React renders numbers as text. Write movies.length > 0 && … instead."}],"answer":3},{"q":"MovieList should show a full-page “Nothing to watch yet” message when the list is empty, and the list otherwise. Which structure reads best?
if (movies.length === 0) return <EmptyState />; followed by the normal list markup.","why":"Correct. The empty case is handled and done; the rest of the function only deals with the normal case, without nesting."},{"text":"A ternary wrapping the entire component’s JSX, with another ternary nested inside for each item’s badge.","why":"It works, but nested ternaries in big JSX blocks are hard to read and easy to break when editing."},{"text":"Render both and hide the wrong one with style={{ display: 'none' }}.","why":"Both trees stay mounted and run, and you now have two places to keep in sync. Render only what’s needed."}],"answer":0},{"q":"WatchedBadge should render nothing when watched is false. Which version does that?
if (!watched) return; and nothing else for that case","why":"A bare return gives undefined. React 19 accepts it, but return null states the intent clearly and is the convention you’ll see everywhere."},{"text":"if (!watched) return <></>;","why":"An empty fragment also renders nothing, but it’s noisier than the conventional return null."},{"text":"if (!watched) return null;","why":"Correct. Returning null is the standard, explicit way for a component to render nothing."},{"text":"if (!watched) return false;","why":"A component returning false happens to render nothing, but it reads like a bug. Return null."}],"answer":2},{"q":"A collapsible “Watched” panel contains a text input. A user types a note, collapses the panel with {open && <Panel />}, and expands it again. What happened to the note?
Nothing to watch yet.
;\n }\n\n return (\nMovieList has three bugs. Fix them so that:
<span className="badge">Watched</span>) appears only on movies whose watched is true.movies is empty, the list renders the message Nothing to watch yet. instead of a list.App renders the list twice, once with three movies and once with none. Don’t change App.
movies.length && … evaluates to when the length is 0.","Handle the empty case first with an early return: if (movies.length === 0) return <p>…</p>;","For the badge, use {movie.watched && <span className="badge">Watched</span>}."],"explanation":"The early return handles the empty list completely, which removes the movies.length && … expression and its stray 0 in one move. For the badge, movie.watched && <span>…</span> is safe because watched is a boolean: when it’s false, React renders nothing. Keep && for booleans; when the left side is a number, compare it explicitly (length > 0).