cf.completefrontend

Predict the outputEasy

What does this cart show when it has no items?

The cart uses && twice: once to show the list when there are items, and once to show a message when there aren't.

What does it log, and what does the page show?
const items = [];
 
export default function App() {
  return (
    <div>
      <h2>Your cart</h2>
      {items.length && (
        <ul>
          {items.map((item) => (
            <li key={item}>{item}</li>
          ))}
        </ul>
      )}
      {items.length === 0 && <p>Nothing here yet.</p>}
    </div>
  );
}

It runs in development, rendered as <App />.

The answer

Work out every line it logs, in order, and what the page shows at the end. Then check.

Checking your sign-in…