Props for Beginners (react)

What makes the framework react so interesting and much better than vanilla javascript, is the fact that it is built on sections of your app called components. These components are functions that return what you would like that section of the app to do and results in much cleaner code. But what we will be focusing on is how we pass information from one component to the next.

What is a prop

Props is short for properties and like I said above, it is used to pass information/data from one component to another.

Lets look at an example:

// PARENT COMPONENT

function ArticlePost() {
  return (
    <div>
      <ArticleContent articleText="Today Sherry Tomford, the girl who's been missing for the last 12 years, has finally been found" />
    </div>
  );
}

// CHILD COMPONENT

function ArticleContent(props) {
  return <div>{props.articleText}</div>;
}

In this example we can see 2 components. One being the parent and one the child. The parent component (ArticlePost) is returning a div containing article text. When we go on to the child component (ArticleContent) we can use props as the parameter followed by a return that states (props.articleText). This lets the code know that we want to grab article text from the parent component.

• NOTE: Data only flows from parent component to the child component. In the same way that the parent tells the child what to do, not the other way around.

Double check:

console.log(props);
// => { articleText: "Today Sherry Tomford, the girl who's been missing for the last 12 years, has finally been found" }

We can console.log props so we can see that it is indeed referring to the parent components data of article text.

Why is this helpful ?

Usually components will be in different files so the use of props allows you to write a piece of code once and use it in multiple other areas without having to rewrite it everywhere you want to use it.

Why would you even want to pass that data down, can't you just use the original component ?

Well, different component have different functions. The second component might want to access just a piece of data from the first component so it can make that data do something else.

For example we can take a look here:

There is a parent component which is holding (isPublished) but we brought it here to the child component(BlogContent) so that we can manipulate the data via conditional rendering. If isPublished is false (is not published) then return null so the user can see no DOM elements displayed. But if it is published, display the following published content (shown in the return. The return wants to show the user the article text and the minutes to read. This is a more developed example of how and why we use props to grab data from the parent function/component to use it in the child and manipulate the data to show us something we want.