React Props: A Quick Primer

In React, components make it really easy to duplicate parts of a website with slight variations.

For example, say you wanted to have a comment section underneath your blog posts. Each comment would look very similar, with an avatar, a date, a text block, and maybe even some like and dislike buttons.

To hardcode all of that information in using regular HTML or JSX would quickly become extremely difficult to read and maintain.

Luckily, components make it possible to turn a single comment into a reusable piece that dynamically fills itself with the correct data using something called `props`.

What are props?

React uses props as a way to pass data from a parent component to a child component. It is a one-way flow of information.

The goal of the props system is to use data supplied by the parent to customize the look and behavior of the children.

In our "comment" example from above, the parent might pass the users' names, comment text, and dates posted down as props to dynamically display each comment on the page.

The Comment component would look the same each time, regardless of how many comments were shown, but each comment would have a dynamically passed name, text, and date coming from the parent.

A `CommentDetail` component might be written in JSX like this:

<CommentDetail name={name} date={date} sentence={sentence} avatar={avatar} />

This example uses four props: name, date, sentence, and avatar. That particular data would be accessed and displayed inside of the component.

In the child component, the first argument received is an object that contains all of the props passed to it by the parent. It's convention to call this object 'props':

const commentDetail = (props) => {}

You can can then access props by using dot notation:

{props.author}

Functions can be passed as props, too. You can then execute the function in the child component:

// in the parent
const theFunc = () => {
return <h1>Hello, world.</h1>
}
<CommentDetail someFunction={theFunc} />
// in the child
<div>{props.theFunc()}</div>

One of the biggest aspects of React is the reusability and modularity of components. Not only can we stack components by reusing them an unlimited number of times, we can also nest components inside each other.

This gives us the freedom to use components as lego pieces, mixing and matching them however we would like in order to build large, complex apps.

Here's an example:

<ApprovalCard>
<CommentDetail name={name} date={date} sentence={sentence} avatar={avatar} />
</ApprovalCard>

In this example, we've stuck our CommentDetail component inside of another component called ApprovalCard.

The ApprovalCard is getting receiving CommentDetail as a prop, and it can be accessed via `props.children`.

// in ApprovalCard.js
<div className="content">{props.children}</div>

Since our ApprovalCard is receiving CommentDetail as a prop, the code above will render the entire CommentDetail component inside of the specified div.

We could just as easily pass something else to ApprovalCard. Instead of a component, we could simply put plaintext or a header, or both:

<ApprovalCard>
<div>
<h2>This will get rendered</h2>
And so will this.
</div>
</ApprovalCard>

In this case, instead of a separate component, ApprovalCard's `props.children` will be the div and its included content. It will still render to the page and display just fine.