cf.completefrontend

Predict the outputMedium

Which value wins when you spread props and also pass the same prop?

Badge gives color a default. App renders it three times with the same sale object spread onto it, and a color written before or after the spread.

What does it log, and what does the page show?
function Badge({ label, color = "gray" }) {
  return <li>{label}: {color}</li>;
}
 
const sale = { label: "Sale", color: "red" };
 
export default function App() {
  return (
    <ul>
      <Badge {...sale} color="blue" />
      <Badge color="blue" {...sale} />
      <Badge {...sale} color={undefined} />
    </ul>
  );
}

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…