- Practice setting initial state
- Practice deriving initial state from props
- Practice updating state with event listeners/handlers
Let's jump right into working with state. For this lab, we are going to render a matrix, or grid, of squares. Each square will have only a background color. When clicked, the square will change colors.
Our component tree consists of a Matrix
, which renders many Cells
(squares).
Our job is to finish implementing Matrix
so that it renders the appropriate
amount of cells, with the appropriate amount of values.
Matrix
uses a prop, values
, to determine the cell colors. This is a 10 x 10
array (essentially making 10 rows, with 10 values in each row). Because we are
responsible React developers, we want to make sure we have a default grid in
case no values
prop is passed.
- Make a default
values
prop forMatrix
, which is a 10x10 array filled with the values '#F00' (red). For inspiration, take a look atsrc/data.js
. - Once you have made your
<Cell />
component, replace the return value ingenRow
's map to:<Cell value={val} />
Create a new component in src/
called Cell
. The Cell
component will give
us our first chance to use state
. We want each Cell
to keep track of a
single state
value: color
, (which will be a 3 digit hex value i.e. '#FFF').
-
Define a
constructor
method inCell
, which sets an initial state key ofcolor
to thevalue
prop which is passed from its parent component. Remember to callsuper()
on the first line of the constructor (this is required in React components if we are to usethis
in the constructor). Additionally, for props to be accessible within the constructor, we need to passprops
to both the constructor as well assuper
. Ultimately, our constructor should look something like this:constructor(props) { super(props) // ...define initial state with a key of 'color' set to the 'value' prop }
-
Cell
should render a single<div>
with a className ofcell
-
In render, the cell should set the background color in-line for the
<div>
by adding the following attribute:style={{backgroundColor: '#FFF'}}
('#FFF' is just used as an example value here - the value should be state's color) -
Create a click listener which, when activated, updates the state to the following hex value: '#333'
npm start
and assert the following:
- The application displays 100 cells in a 10x10 format
- If no
values
prop is passed toMatrix
insrc/index.js
, then all the cells are red - If
pattern1
is passed toMatrix
insrc/index.js
, then the cells are alternating red-blue - When you click on any given cell, that cell's color changes to dark gray
View React Simple State Lab on Learn.co and start learning to code for free.