Deviopath › React

Lifting State Up

Medium · Composition

ProductList and ProductDetails both need to know which product is selected, so the state has to live in their parent, App.

- ProductList renders one <button> per product. Clicking it selects that product. The selected button gets className="selected".

- ProductDetails renders a <p>: "Select a product" when nothing is selected, otherwise e.g. "Phone costs $500".

Pass the state and a setter function down as props.

Next: Notification Center