🧐 It's nice....but it's still all static 😒

So far, we have only used static, unchanging, hard-coded data. Boring!

Having the list in an array allowed us to map the array items into components directly in JSX...

const meals = [...]
const desserts = [...]

class Menu extends React.Component {
  render() {
		return...
			meals.map...
			desserts.map

...but our array is still static 😡

In real world apps, data is dynamic!

• It could be coming from a database or an API.
• It can be changed by user input and events.

→ To do that, we need state.

State management - the key to dynamic web apps

• State is where data lives in the UI
• Used for changing/dynamic data. Not for constants and "static" variables
• State is "local" and "encapsulated" in the component. It is private and fully managed by the component**.**

State is not accessible to any component other than the one that owns and sets it.

React docs

• 🤔 Q: If state strictly belongs to a component, how is data passed from one component to another? (toggle to reveal answer)

Data Flow: State at the top → flows downwards via Props

Unidirectional / Top-down data flow

Any state is always owned by some specific component, and any data or UI derived from that state can only affect components “below” them in the tree.

If you imagine a component tree as a waterfall of props, each component’s state is like an additional water source that joins it at an arbitrary point but also flows down.

React Docs