This project was bootstrapped with Create React App.
- Learn about event handlers in React
- Learn the difference between props and state, and why one would use one or the other
- Instantiate state in and out of the constructor
- Trigger re-renders by manipulating state
- Manipulate the DOM by changing values in state
- Get more familiarity with component hierarchy and the flow of information
Learn by doing! Let's build something that needs state!
state
is data that will change.- How do we define it?
constructor
vsstate = {}
- How do we change it?
- Never mutate
state
!!! - Always make copies of
state
!!! - We change it with
setState
- Never mutate
- Briefly - Event Handlers
onClick
to execute some action
- Debugging
state
:render
as a way to also testsetState
- Binding functions to use
setState
; why? props
go down,state
goes up
props
go down,state
goes up
What does this really mean?
- Picture
#Plan
- render dog picture to page in a component
- component changes dog through state updates
- refactor to have DogContainer render DogCard
- pass props to DogCard from DogContainer state
- trigger rerender in DogContainer by calling a function in DogCard