value-on-change-ex3.tsx

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

  return (
    <InputWithLabels
      value={shoppingItems}
      onChange={setShoppingItems}
    />
  )
}

function InputWithLabels(props) {
  const onAddItem = (itemToAdd) => {
    props.onChange([...shoppingItems, itemToAdd]);
  };

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

  const onClickClearAll = () => {
    props.onChange([])
  }

  // Your own implementation of this component. Go wild!
  return (
    <div>
      {props.value.map((label) => renderLabel(label))}
    </div>
  )
}