Deviopath › React

Add a Fruit

Easy · Lists

Keep the fruits in an array in state. The list starts with "Apple" and "Banana".

Clicking "Add" appends the text of the <input> to the end of the list as a new <li>. If the input is empty, nothing is added.

<p>Total: 2</p> shows how many fruits are in the list.

Tip: create a new array (for example [...fruits, text]) instead of calling push() on the old one.

Next: Star Rating