Sold out!
A dish that's sold out should say so; an empty cart should show a friendly message; an admin sees an extra button. Components decide what to show with ordinary JavaScript.
Three patterns
function Dish({ name, stock }) {
if (stock === 0) {
return <li className="sold-out">{name} — sold out</li>;
}
return (
<li>
{name} {stock < 5 ? <em>(only {stock} left!)</em> : null}
{stock > 50 && <strong> Popular</strong>}
</li>
);
}
export default function Menu() {
return (
<ul>
<Dish name="Momo" stock={80} />
<Dish name="Sel roti" stock={3} />
<Dish name="Yomari" stock={0} />
</ul>
);
}