I found a new resource that helped me better understand the difference between State and Props in React.
The main responsibility of a Component is to translate raw data into rich HTML. With that in mind, the props and the state together constitute the raw data that the HTML output derives from.
further explained by the post:
props (short for properties) are a Component’s configuration, its options if you may. They are received from above and immutable as far as the Component receiving them is concerned. A Component cannot change its props, but it is responsible for putting together the props of its child Components.
So when I make a component, I’m setting up HOW props will be used
class Title extends Component
Then I use them as I use the component
... /* inside App.js, inside it's render function,
which will be sent to the DOM */
<Title firstName="Kara" hometown="Denver" />
The state starts with a default value when a Component mounts and then suffers from mutations in time (mostly generated from user events). It’s a serializable* representation of one point in time—a snapshot. A Component manages its own state internally, but—besides setting an initial state—has no business fiddling with the state of its children. You could say the state is private.
* We didn’t say props are also serializable because it’s pretty common to pass down callback functions through props.
Changing props and state
|Can get initial value from parent Component?
|Can be changed by parent Component?
|Can set default values inside Component?*
|Can change inside Component?
|Can set initial value for child Components?
|Can change in child Components?
* Note that both props and state initial values received from parents override default values defined inside a Component.