What's the difference between Props and State?

Props and State within React can get kinda Funky upon first inspection. When I first started with react I was incredibly confused. I would attempt to use state where this.props should have gone and vice versa.

It wasn't until I was thrown into doing a project on my own that I finally got it down and realized the key differences between the two (aside from the obvious setup).

Props

Props and State are related. The state of one component can become the props of another child component. Props are passed through the render method of the parent.

For example, lets use JSX. <MyChild name={this.state.childsName} />

The parent's state value of the childsName becomes the child's this.props.name.

To simplify it a little more. Imagine there are you and a friend in a straight line. Your friend is tossed a few balls. The ball your friend is holding is blue. The other balls are on the ground. The current state of this ball is blue. In order for the ball to be passed down to you, you need its props (properties). Think of the color of the ball as its prop. In order for you to get the blue ball prop and not a red, yellow, or green ball, your friend (parent component) has to pass the ball down to you(child component).

Now coming back to our code, in order to access that state value in the child component. You're going to want to use this.props.name.

To me, this is React magic. There is a lot going on underneath that I am not capable of clarifying at this time but walk away knowing that in order to pass state to other components, it needs to be through props.

Now, is it possible to change your props? Yes and no.

Props are immutable. They do not change. During a component's life cycle, props should not change. If you're working with a component that does not incorporate state, then you can refer to that component as "pure." It will always render the same output given the same input.

Now is state always necessary?

Nope! If you don't have data that needs to be changed over time, then a pure (stateless) component is fine to use.

State

Now we will move onto state. State has a few key differences.

1. State is created in the component.
2. State can be changed!

A question I had, in the beginning, was " when should I use state?"

When a component needs to keep track of information between renderings the component itself can create, update, and use state.

State contains "private" information. Its set in the parent component for it to be initialized, changed and used on its own.

Props contain the information set within the parent component (default props can be set) and should not change.

Let's say we have a counter! We set the state of that counter.

state ={
count: 0
}

Now we want to create a method that updates the state every time you click a button.

updateCount() {
this.setState((prevState, props) => {
return { count: prevState.count + 1}
});
}

The prevState is what state was when declared. Even if you changed state somewhere else, it will reference the initial state set above (which is super magicalllllll).

Counts prevState of zero is being updated by one, every time you click the button. On top of this, setState triggers a call to render()!

render() {
  return (<button onClick={() => this.updateCount()} >
            Clicked {this.state.count} times
         </button>);
  }

It will update in real-time without the need for a page refresh.

Hopefully, this is helpful!