Early Lessons on Props and State
One trick I’ve used over the years to help me learn new concepts is to re-write more technical concepts as if I want a 7 years old to understand it.
As I write this, tonight marks my second day learning React, and so I felt it would be helpful to simplify some early principles of props and state.
My initial, simple understanding is that React takes the website/application, and segments it in to reusable pieces (components).
A plumber doesn’t need to know how to make a supply line before connecting your toilet, they just need to know how to connect it and not destroy your place.
A plumber may need to solder or weld two things together, but they’re not building components from scratch, just like React minimizes how much we need to build from scratch.
React allows us to work similarly, by re-using bits of code from other people’s work, and only requires us to build new features when there’s isn’t good code available to us yet.
In many instances these components need to transfer data to and from each other, and they do so through the use of props, which stands for properties.
But props do not give our components a two-way street to communicate. There are a couple principles of props that are important when starting to learn React:
- Props only go in ONE direction, specifically, from parent to child.
In the following example, this would mean that props (data) can be passed from MovieShowcase to MovieCard, and from MovieCard to CardFront and/or CardBack, but not in the opposite direction:
2. Props pass data from one component to another.
3. Props should never modify itself. When the child receives the props, they cannot change the data they are receiving (e.g. increasing a value +1).
This is what React means when it says the data is “read only.”
4. The prop being called on the child component must be an exact match for the key, of the value I want. A little typo can totally break an app.
Question Break! What’s wrong with the following code?
IMDBrating should be IMDBRating. Since I’ve missed the capital R here, the ratings aren’t showing in my app. As soon as I correct that, the app works as it should again.
On the child side, we then access prop data w/ dot notation:
And what about state?
State doesn’t pass data in React, it creates and manages data.
When state changes in React (e.g. a “Like” counter increases), React takes in this information and re-renders the specific DOM component.
This is a big part of why you hear that React is fast.
React didn’t need to re-render the whole DOM, it just needed to re-render the changed component!
To communicate the Like update with React, we have to use the setState() method, which initiates the re-rendering process for the component.
The process is as follows:
Say you have a button with 10 likes.
When you click to add #11, it triggers a function in React that captures the component’s current state (shown as this.setState), and increments the count by 1.
To leave a final thought at the end of night two, this.state should never change directly! The setState method is how we change state.
