VOC - ex2

value-on-change-ex2.tsx

function ShoppingForm() {
  const [shoppingItems, setShoppingItems] = useState(['Apples', 'Cookies']);

  const onAddItem = (itemToAdd) => {
    setShoppingItems([...shoppingItems, itemToAdd]);
  };

  const onRemoveItem = (itemToRemove) => {
    const updatedItems = shoppingItems.filter(item => item !== itemToRemove);
    setShoppingItems(updatedItems);
  }

  const onClickClearAll = () => {
    setShoppingItems([]);
  }

  return (
    <InputWithLabels
      value={shoppingItems}
      onAddItem={onAddItem}
      onRemoveItem={onRemoveItem}
      onClickClearAll={onClickClearAll}
    />
  )
}