State is data maintained by a React component for values that change during interaction and trigger updated content. A product item can keep a selected quantity as local state while receiving the product and cart callback through props. section 20.4
TypeScript React components manage state in two main ways:
- Class components describe state with a State interface and initialize it through the component constructor. section 20.4
- Class components apply changes with setState; React uses that method to recognize that an update occurred. section 20.4
- Functional components use the useState hook, which returns a readable value and a separate updater function. section 20.4.1
- Generic type arguments let TypeScript check state properties and values passed to state-update functions. section 20.4 section 20.4.1
Tracking a selected quantity
A functional product component can declare `const [quantity, setQuantity] = useState<number>(1)`. A select element converts its selected value to a number and calls `setQuantity`; expressions read the current `quantity` when invoking the cart callback. section 20.4.1
