Beginner Studying React — Props & State
Props and states are the only two things that will lead React to update your DOM is something changed.

Props
Why use props?
When we are using the component, we don’t want to render the same component everywhere every time, right? We want to render the component with different data. That’s where Props comes in. Props are used for the parent components to pass data to the child components.
How to use props?
In the parent element, we pass the data in the JSX attribute:
class App extends Component {
render() {
return (
<div>
<Human name="Songtao"/>
<Human name="Lin"/>
<div>
);
}
}And in the child component, it will always pass in a props variable( You can change this name but conventionally it is called props) presenting all the props that are passed in from the parent. In the previous example, we can do something like:
const human = (props) => {
return (
<p>I'm not {props.name}!!!!!<p>
)
};It is the same principle for functions, right?
- In functions, we pass in some parameters. In components, we pass the props to the component.
- In functions, after some business logic, we get the output based on the input. In components, we can also implement the logic before return the JSX based on the props.

State
Why use state?
We will often have some data that we don’t want them to be changed by other components. It is like it is local to the current component. The state is the way to do this. The state is a variable that can only be accessed with the current component, which is quite similar to the name scope, right? The scope of the state is just the current component.
How to use state?
To use a state, we define a state variable in the component:
class App extends Component {
state = {
username: "Songtao",
start: true
}Now to change the state, if you change it directly, the console will pop up a warning saying “Do not mutate state directly. Use setState()”. And guess what? We are gonna use setState():
this.setState({username: "notSongtao"})By doing this, React will not erase the other state variables, it will simply merge the new state with the old one. Sweet!
How to modify reference state variable?
Imagine you have this state:
state = {
humans: [
{name: "Songtao"},
{name: "Shae"},
{name: "Harriet}
]}And you want to delete the second entry when a button is clicked, what do you do? You may be tempted to do:
const lessHumans = this.state.humans;
humans.splice(1, 1);
this.setState({humans: lessHumans});And the browser actually will not throw an error. If you squint, can you see the problem? Because this.state.humans is an array which is a reference type, lessHumans is pointing to the same object. By using the splice on it, it modifies the original state straight away. This is bad. So we should do a copy of the original array by:
const lessHumans = this.state.humans.slice();or
const lessHumans = [...this.state.humans];Functional component vs Class component
We have two ways to initialise a component:
- Class component
class App extends Component {}2. Functional component
const App = () => {};One of the main differences is that in functional component, because we are not extending Component, we can’t have the state variable. It only has a return statement.
What?? Isn’t that useless? Actually, it is recommended to use the functional component in most of the scenarios. Why? Because without the state variable, it means that the current component will not unexpectedly affect your current state. As your application grows, it is much easier to maintain your state within a few components as possible. We call those: the containers.
========================================
Massive props to Maximilian Schwarzmüller’s React 16 course. For a beginner like me, it is a godsend.
Thanks for reading! Love you! Peace out!