Updated June 2026. Tested on React 19 and modern JavaScript. Part of the Techalyst React series.

Two things show up in almost every component: deciding whether to show something, and rendering a list of things. React has no special template syntax for either, you just use plain JavaScript inside your JSX. That is elegant once it clicks, but the list case hides a detail, keys, that quietly causes bugs when you get it wrong.

Conditional rendering

There is no v-if in React. You use ordinary JavaScript expressions. Three patterns cover nearly everything.

For "show this only when true", the logical &&:

{isLoggedIn && <LogoutButton />}

For "show one thing or another", a ternary:

{isLoggedIn ? <Dashboard /> : <Login />}

And for whole-component branches, an early return:

function Profile({ user }) {
  if (!user) return <Spinner />;
  return <div>{user.name}</div>;
}

One sharp edge with &&: if the left side is a number like 0, React renders the 0 instead of nothing, because 0 is falsy but still a valid thing to render. Guard with a real boolean, count > 0 && ..., rather than count && ....

List rendering

To render a list, map your array to JSX. The result is an array of elements, and React renders it:

<ul>
  {products.map(product => (
    <li key={product.id}>{product.name}</li>
  ))}
</ul>

That is the whole pattern. Any array method that returns elements works, so you often filter then map to render a subset.

Why keys matter

Notice the key on each <li>. React requires a key on list items, and it is not a formality. The key is how React identifies which item is which between renders, so when the list changes, adding, removing, reordering, it can match old elements to new ones and update only what moved, instead of rebuilding everything.

Two rules make keys work. They must be stable, the same item gets the same key every render, and unique among siblings. A database id is perfect.

The classic mistake is using the array index as the key:

{items.map((item, index) => <Row key={index} />)} // avoid

It looks fine until the list reorders or you remove an item from the middle. Then the indices shift, so React thinks item 2 became item 1, and it reuses the wrong element, which shows up as state attaching to the wrong row, a checked checkbox jumping, or an input keeping the wrong value. Use a stable id from your data. Only fall back to the index when the list is static and never reorders.

Wrapping up

React does conditional and list rendering with plain JavaScript: && for show-when-true, a ternary for either-or, an early return for whole branches, and map to turn an array into elements. The one thing to take seriously is keys: give every list item a stable, unique id so React can track items across changes, and never use the array index for a list that can reorder or change length. Get keys right and a whole class of strange list bugs never appears.