Going to School on Passing Props

I recently started working as a Technical Coach for Flatiron. One of the most useful skills I am learning is how to explain concepts through real world applications. The other day I was helping a student work through the React portion of the curriculum asked me how we know when to use props. Initially, I was explaining the concept with technical terms, but it was very textbook and it still wasn't clicking for the student.
If you're reading the material, and thinking about the concept technically isn't working for you it's likely that someone explaining it to you technically isn't going to help much either.

I came up with a real world application for props that made things click for the student, and I hope this blog can help make it click for others as well!

We have a parent and a child component. When props are passed down from parent to child, that information is read-only(immutable). All the child can do is present that information. So, we can think of it in terms of a permission slip:

1. A parent signs a permission slip for their child to go on a field trip. (permission slip state)
2. That parent gives the permission slip to their child to bring back to school. (passes down prop)
3. The child cannot make any changes to the permission slip. (props are immutable!)
4. The child presents the permission slip to their teacher. (rendering)

import React from 'react';
import Child from './child';

class Parent extends React.Component { 
  constructor(props) {
    super() #allows us to use the keyword 'this'
    this.state = {
      permissionSlip: "Parent Signature On Permission Slip"
    }
  }


  render() {
    return (
      <Child permissionSlip={permissionSlip} />
    )
  }
}

export default Parent;

import React from 'react';

class Child extends React.Component {

  render() {
    return (
      <div> 
        {this.props.permissionSlip}
      </div>
    )
  }
}

export default Child;