school busses

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) {
this.state = {
permissionSlip: "Parent Signature On Permission Slip"

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

export default Parent;

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store