🧐 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() {

...but our array is still static 😑

In real world apps, data is dynamic!

β†’ To do that, we need state.

State management - the key to dynamic web apps

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

React docs

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