- 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.
Let's take some time to understand the code base. First, open up the index.js
file and you'll see that Matrix gets a values
prop of pattern1
which is imported from data.js
. Go ahead and open up data.js
to see what pattern1
is. You'll see that pattern1
is a nested array of '#F00' and '#00F' (red and blue).
Now let's look at Matrix.js
. The render()
method shows us what our Matrix
component looks like: a <div>
tag with id=matrix
. But inside that div, we invoke this.genMatrix()
. We see that genMatrix
is an instance method which maps this.props.values
to an array of JSX. Basically, every 'row' in this.props.values
will create a <div className="row">
. Furthermore,
if we look at genRow
, we'll see that every row will map through its vals
to create an array of <div className="cell">
JSX.
In the end, the following HTML is generated (You can run this lab and use Chrome's developer tools to check for yourself):
<div id="root">
<div id="matrix">
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
...
</div>
<div class="row">
<div class="cell"></div>
<div class="cell"></div>
<div class="cell"></div>
...
</div>
</div>
</div>
Take time to really understand what's going on before tackling the deliverables of this lab. Throw a console.log
as the first line of genMatrix
to check what this.props.values
is. Then throw a console.log
as the first line of genRow
to check what vals
is.
Matrix
should use its prop, values
, to determine its 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} />
. Here we are specifying ourCell
component should have avalue
prop.
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.state
in the constructor). Ultimately, our constructor should look something like this:constructor(props) { super() this.state = {} // ...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 the 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
react-simple-state-lab's People
Forkers
salsa-dude kjdub01 seanpadden kat-star danhjoo7 emileypalmquist adamlarosa urfan196 mustafa-al-shaheri petersampson010 clarkj99 euticus gnardinosaur lainaj jeffrey-fls almsq muesingb tjbender solomonp90 keenan-alves automobileslie yuriyberezskyy alexanderjessediaz assansav andresmanco ericiscoding chrisbaptiste83 bonjourannie munroe1786 justindhall joseph-gansukh chriskay25 sdcrouse stefclaus alexstephane conradbuys11 giuliacajati kaladajumbo melindadiaz07 theprivatepark navpoint1 milobravman brazenbillygoat jmlovitsch kylefarmer85 billyott i-am-lain joshua-flatiron h11z laurencun mkirby stacksonstack bryamvicente myildiz17 mikesap noble-webb tjbigelow barbarakuofie zackcarlson014 thesebonesalone j2b2590 bjf-flatiron sagbeyeg see-bet-code tincogs dickm19 gooseisdead lantzbuilds jomariepolanco raaynaldo jaquan1314 jrshort89 alexriosdev techtwin mkoenke jacobkagon patriciaarnedo nnhk23 erick-eev alecgrey wlytle crrojas88 stephenvincentibanez jkofler93 arielvgrubbs sarabastian jbondeson19 marisayou gamil91 mandareis will-gon tolentinoel chrisdemahy euberman inee-ader michael-lee-1994 elijahbrookss hugodelgado18 mderosa777 jrcliffreact-simple-state-lab's Issues
Tests pass but the app doesnt work in the browser
Students are able to get the tests to pass but the app doesn't display in the browser.
I tried cloning the solution down to my system to test and that also did not work in the browser.I don't have the bandwidth to look into it myself but if someone is able to check the recent PRs I know the lab has worked properly in the past, maybe they can locate the breaking change.
Issue with sinon.spy in specs
I was getting this spec error:
`1)
has an event listener that, when clicked, calls this.setState() once (make sure you aren't setting state directly, but instead using the component's 'setState' method):AssertionError: expected false to equal true + expected - actual -false +true at Context.<anonymous> (test/1-Cell.test.js:52:36)
`
but I have a setState() method on my Cell component:
It would appear that the sinon.spy is not working for this spec:
it("has an event listener that, when clicked, calls this.setState() once (make sure you aren't setting state directly, but instead using the component's 'setState' method)", () => { const setState = sinon.spy(Cell.prototype, 'setState'); cellWhite.find('div').simulate('click') expect(setState.calledOnce).to.equal(true); })
The resolution the technical helper and I came to was to comment out this spec.
We haven't learned about click handlers
Click handlers need to be explained in the reading or a resource should be given (and its purpose explicitly stated).
fyi: web ide button failed to start the lab
requires local version through forked copy for the lab server to start.
Solution includes ColorSeclector component which isn't mentioned in the lab.
Link to Canvas
Issue Subtype
- Master branch code
- Solution branch code
- Code tests
- Layout/rendering issue
- Instructions unclear
- Other (explain below)
Describe the Issue
Source
Concern
(Optional) Proposed Solution
What OS Are You Using?
- OS X
- Windows
- WSL
- Linux
- IllumiDesk
Any Additional Context?
Solution includes ColorSeclector component which isn't mentioned in the lab.
Link to Canvas
Issue Subtype
- Master branch code
- Solution branch code
- Code tests
- Layout/rendering issue
- Instructions unclear
- Other (explain below)
Describe the Issue
Source
Concern
(Optional) Proposed Solution
Is it possible to show a solution for those learning this code for the first time, to adhere to just "state" and "props" and use code that follows the instructions given in the lab? Please?
What OS Are You Using?
- OS X
- Windows
- WSL
- Linux
- IllumiDesk
Any Additional Context?
Syntax for GenRow and genMatrix
Syntax for the genRow and genMatrix use one line arrow notation. Lab asks the user to insert a console.log into the code to help understand. This will throw an error, recommend replacing the () after => with {} so two lines of code will not throw an error.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.