React Props: A Beginner's Guide

When learning React.js one of the very first concepts you are likely to learn about is props. But what are props? What does it mean to pass down props? How do you use props? And if you say props one more time, the word is going to cease sounding like a real word.

About a week into my React course I was struggling a little bit with the generalized concept of props. I knew the syntax to pass down props, I could destructure props in child components, and I could iterate through a props array. But the very intrinsic nature of what IS a prop was confounding me. Which was causing me some difficulty in correctly determining the scope of the props I wanted and needed to use. Then a colleague in my course cohort said to me off-handedly, "props is just short of properties" and I had the clouds parting, a choir of angles singing a-ha moment. I say this in case, like me, you needed to hear that. Props are simply the properties you want a component to use to render its function to the page. They could be an array of objects, a callback function, etc.

Props are how react components communicate with one another. Data that is stored in one component but is needed in the function of a second (or third) component is communicated along the chain by the passing of props.

As an example: Your application has a main component that renders two components, A and B. Component B then renders Component C.

                                Main
                               /    \
                              /      \
                    Component A     Component B
                                         |
                                    Component C

Let's say that the data that components A, B, and C need to render is stored in the Main component. How does component A get the data it needs? We "pass" it down via props from the Main component. How does component C get that data to complete its render? By now you've guessed it--by passing down that data prop(s) from Main to component B, which then passes the prop(s) down to component C. When multiple components require the same data to render, the data must be stored in the lowest common ancestor in the components tree.

In the example above, components A, B, and C all require the same data. In this situation, the data will be stored in the component Main so that it can be passed to all the child components that require it.

Now that we know why we pass down props let's answer the question how do we pass down props. To answer that we first need to quickly discuss what a props argument is. All of the attributes we want to pass down to a child component are gathered together by React and turned into an object. The props object is passed to a functional component as an argument, becoming a props argument.

function Main() {
    return (
      <div>
        <ComponentA props={props} />
        <ComponentB props={props} />
      </div>
}

In the example code above, we created our component called Main. Main's only job is to render two child components, A and B. Within the return, we call two functional components and pass along the data/attributes they require (within the curly braces) as an object called props.

Now our child components can access the attributes they need to complete their render. Within the child components functions, we add the props as the argument. Example:

function ComponentA(props) {
  return (
    some JSX 
)}

Now the props stored in Main are within scope for component A to access and use to display them on the page.

function ComponentA(props) {
  const attribute1 = props.attribute1
  const attribute2 = props.attribute2
  return (
    <div>
      <span>Attribute 1: {attribute1}</span>
      <span>Attribute 2: {attribute2}</span>
    </div>
  )
}

This is, at the highest level, what props are, how they are passed down the component tree, and how they are used by child components to render the data to the application. This is just the very tip of the iceberg that is props. In future posts we will get into passing functions as props, and talk about how we can pass data back up the tree.