cf.completefrontend

Predict the outputEasy

What does this page show when a prop with a default is undefined, null, or missing?

Greeting gives name a default value in its parameter list. App renders it six times, passing name in different ways.

What does it log, and what does the page show?
function Greeting({ name = "guest" }) {
  return <p>Hello, {name}!</p>;
}
 
const user = { id: 7 };
 
export default function App() {
  return (
    <>
      <Greeting />
      <Greeting name="Ada" />
      <Greeting name={undefined} />
      <Greeting name={null} />
      <Greeting name="" />
      <Greeting name={user.name} />
    </>
  );
}

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…