Props vs state

Model answer.

• Props are inputs passed from a parent. They are read-only inside the child: a component must never modify its props.
• State is data a component owns and manages itself (with useState or useReducer), which changes over time, usually in response to events.

When either changes, the component re-renders with the new values.

function ProductCard({ title, price }) {          // props from the parent
  const [qty, setQty] = useState(1);              // state owned here
  return (
    <div>
      <h3>{title}</h3>
      <p>₹{price * qty}</p>
      <button onClick={() => setQty(q => q + 1)}>Add one</button>
    </div>
  );
}

How to decide: if a value comes from outside, or can be computed from props or other state, it is not state. Keep state in the lowest common parent of the components that need it ("lifting state up"), and pass it down as props, along with callbacks to change it.