Props & State or Chutes & Ladders?

While learning about this.state and this.props in our delve through ReactJS, I was struck by an odd similarity between this high level Javascript concept and one of the simplest board games from my childhood.

When you set state at your high level Components, it’s as if you rolled and landed on a chute tile. The key-value pair that you define there are passed down as state into the child Component and on into their child Component as deep as you need to go. Then if you have an event that changes this.props at the child Component level, you’re landing on a ladder tile. Back up the board you go with your new prop until you reach and setState of the high level parent Component again. This change in state takes us back to the chute tile and down we go reassigning this.props of the child Component.

The example that was provided in a LearnCode.academy video series I watched to try and learn the basics of React involved changing the state of a Header by two-way linking it to the input element of a child Component. Walking through this change as it took place and following the string as it was passed from input field to this.props to this.state and then back down to this.props and the input field took me back to a simpler time.

It made sense.