Fanatos

const [ showAll, setShowAll ] = useState(false);
const defaultShow = 2;
const showAllByDefault = ingredients.length <= defaultShow;
const ingredientsToShow = (showAll || showAllByDefault)
  ? ingredients
  : ingredients.slice(0, defaultShow);

{showAllByDefault
  ? null
  : <button onClick={() => setShowAll(val => !val)}>{showAll ? 'hide' : 'show'}</button>
}
<ul>
  {ingredientsToShow.map(n => <li>{n}</li>)}
</ul>