Real World Example

The Checkout parent owns the order. The delivery option chosen in one child changes the total shown in a sibling child.

function Checkout() {
  const [delivery, setDelivery] = useState('standard');
  const fee = delivery === 'express' ? 50 : 0;
  return (
    <>
      <DeliveryOptions value={delivery} onChange={setDelivery} /> {/* child → parent */}
      <OrderSummary items={cartItems} deliveryFee={fee} />         {/* parent → child */}
    </>
  );
}

function DeliveryOptions({ value, onChange }) {
  return (
    <select value={value} onChange={(e) => onChange(e.target.value)}>
      <option value="standard">Standard (free)</option>
      <option value="express">Express (₹50)</option>
    </select>
  );
}