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!
β To do that, we need state.
State is not accessible to any component other than the one that owns and sets it.
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.