React

Conditional Rendering

ingredients_list.png

const Ingredient = ({ name, isNonVeg }) => <li>{name}</li>;

const Recipe = () => (

<ul>
  <Ingredient isNonVeg={false} name="Tomato" />
  <Ingredient isNonVeg name="Chicken" />
  <Ingredient isNonVeg={false} name="Onion" />
</ul>
);

export default Recipe;

const Ingredient = ({ name, isNonVeg }) => (
  <li>
    {name} {isNonVeg && "(Non-veg)"}
  </li>
);

const Recipe = () => (

<ul>
  <Ingredient isNonVeg={false} name="Tomato" />
  <Ingredient isNonVeg name="Chicken" />
  <Ingredient isNonVeg={false} name="Onion" />
</ul>
);

export default Recipe;