Conditional Rendering

If Statement

if (isPacked) {
  return <li className="item">{name} ✅</li>;
}
return <li className="item">{name}</li>;

Typically you determine if you want to render a component in the parent, since it can be confusing doing so in the child. If you do want to return nothing from the child you can by returning null.

if (isPacked) {
  return null;
}
return <li className="item">{name}</li>;

Ternary Operator

return (
  <li className="item">
    {isPacked ? name + ' ✅' : name}
  </li>
);

&&

If condition is true then return value.

Please note that the left side should never result in a number, since you might assume 0 would falsey… but it doesn’t instead 0 is rendered.

return (
  <li className="item">
    {name} {isPacked && '✅'}
  </li>
);