Summary

In this lesson, you learned that:

• Props go down, from a parent to its children. A component can't read the state of another component.
• When several components need the same state, lift it up to their closest common parent. Pass the value down as props, together with a function that changes it, named onX: onToggleFavorite, onSearchChange.
• The child calls the function, the parent changes its state and renders again, and every child gets the new value.
• A state setter is a function too, so it can be passed down as it is: onSearchChange={setSearch}.
• Don't store what you can compute. Counts (favorites.length), totals and filtered lists are worked out while rendering, from state and props. A second state that has to agree with the first one gets out of sync.
• useState(x) uses x only in the first render, so a list in state made from other state stays as it started.
• One source of truth: each piece of data is stored in one place, and everything else is read or computed from it. For data that has to go many levels down, React has context.

In the next lesson, Effects, your components will do things after they render: load the lineup from a server, run a timer and remember the favorites in localStorage.

But first, a little practice: the timetable by day. DayTabs switches between Friday and Saturday, but keeps the day to itself, so Timetable always shows every band.