Props in Depth

function ProductCard({ name, price, inStock, tags, onBuy }) {
  return (
    <div>
      <h3>{name}</h3>
      <p>NPR {price}</p>
      {inStock ? <span>In stock</span> : <span>Out of stock</span>}
      {tags && tags.map(tag => <span key={tag}>{tag}</span>)}
      <button onClick={onBuy}>Buy</button>
    </div>
  );
}

<ProductCard
  name="Notebook"
  price={150}
  inStock={true}
  tags={['stationery', 'school']}
  onBuy={() => alert('Bought!')}
/>

function DataFetcher({ url, children }) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(url)
      .then(res => res.json())
      .then(data => { setData(data); setLoading(false); });
  }, [url]);

  if (loading) return <p>Loading...</p>;
  return children(data);
}

// Usage
<DataFetcher url="/api/users">
  {(users) => (
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  )}
</DataFetcher>

// ❌ Passing too many props
<UserCard name="Ram" age={22} role="student" email="ram@example.com"
          phone="9841234567" city="Kathmandu" />

// ✅ Pass an object instead
const user = { name: "Ram", age: 22, role: "student" };
<UserCard {...user} />  // spread operator