React Using Callbacks to Pass Information Lab
Objectives
- Practice using state, props, and events
- Practice using callbacks to effect change up and down the component tree
Introduction
In React, props are used to pass information down the component tree, from parents to children. In order to propagate information in the opposite direction, we can use callback functions that are passed from parent components to children.
This allows the callback to be owned by a different component than the one invoking it. Once invoked, the callback can effect change in the component that owns it, instead of the component that called it.
For this lab, we have three components:
└── Matrix
├── ColorSelector
└── Cell (x1000)
We would like to implement the following behavior: when a Cell
is clicked, its
background color becomes the current selected color. With our ColorSelector
component providing the user interface to select a specific color, we need some
way for Cell
to know about the currently selected color. To do this, we will
have the parent component, Matrix
, keep track of the current selected color.
Because passing information between children components is taboo in React, (i.e.
passing information between ColorSelector
and a Cell
), we need to make sure
that the following is implemented:
ColorSelector
has a way to set some 'selected color' inMatrix
when a user selects a colorCell
has a way to know what the current selected color is when it is clicked
Using callbacks, we can do both of these things pretty easily!
Deliverables
Matrix
- provide a way for
Matrix
to keep track of the selected color (think state!) - write a method that takes in a single argument of a hex color string (i.e. '#fff') and sets the selected color to that
- consider what should be done with that method once it is written. Who needs it? How can we get it to them? Use the skills you already have with React to solve this
ColorSelector
- update
makeColorSwatches
to provide the<div>
s it is rendering with some way to fire off that method we wrote for Matrix (hint: consider using an event listener and controlling the argument when an event handler is fired)
Cell
- find a way to access the currently selected color from
Matrix
's state without passing the value explicitly as a prop. (Consider passing a method fromMatrix
toCell
instead. You will want to create an additional method in Matrix to do this.) - implement a
handleClick
method that that updates theCell
's state with the current selected color
Once Finished
Assert the following behavior:
You should see 100x100 cells rendering with a color selection <div>
at the top
of the screen. When any of the color swatches in the color selection <div>
are
clicked, subsequently selected cells should change to that color.
Resources
View React Using Callbacks to Pass Information Lab on Learn.co and start learning to code for free.