State V Props

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

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

render() {
  return (
    <div className="title">
      <h1>{this.props.firstName}</h1>
      <h2>{this.props.hometown}<h2>
...

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" />
  ...

state

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

* Note that both props and state initial values received from parents override default values defined inside a Component.

Source: State V Props