Journey, React

Day 7: Using Props in React

Let’s figure out how to use a prop in react.

If we look at Title Component we have the name as “Timeline” but what if we wanted to use the same component for something else like “Contacts”, or “Settings” or just about anything else. We don’t want to have to go in and change the h1 element every time. We want to have some way of getting that data dynamically.

To pass in a prop we do this the same way we would set an attribute to an HTML tag.

In our Component code we have

Screen Shot 2018-05-19 at 3.03.40 PM

This is the code that we will be accessing and changing. We have the text as “Timeline for now but we will change it.

In our App.js file we use <Title /> to refer to the component. if we want to pass in our text instead of hardcoding it. So we set a new attribute in this case I called it title but you can call it whatever you want.

<Title title=”Timeline” />

Screen Shot 2018-05-19 at 3.08.04 PM

The last thing  that we have to do, is to the Title component and that is to tell it that we are passing in data for it to use. instead of using the word “Timeline” we will use

{this.props.title}

this.props is a keyword that will look at it’s parent element and find what the word “title” is supposed to be. In this case it will be “Timeline”.

Screen Shot 2018-05-19 at 3.14.35 PM

Now what we can do is we can call the component many different times and each time we can change the text to whatever we want. Screen Shot 2018-05-19 at 3.17.05 PM

And our app will automatically make those changes for us.

Screen Shot 2018-05-19 at 3.18.09 PM

We can pass in more that strings we can do numbers objects and even functions.

Content Component

Let’s take the content component and set some of it’s data dynamically as well. We can pass multiple props into a component just like we can set many attributes in HTML.

Let’s make sure that our Content Component has a space for all the information that we want to pass in.

  • Image
  • Timestamp
  • Content Text
  • Number of Comments

Instead of hard coding all the information in ourselves the data will be inside of an array of objects. Each object will be one post. Let’s create that array first, this will be in our app.js file.

Screen Shot 2018-05-19 at 3.54.31 PM

Now just like we passed in the title to the <Title /> component we will pass in this activity array to the <Content /> component.

We do this with

<Content activities={activities} />

Screen Shot 2018-05-19 at 3.46.36 PM

Now we have to change our content component to display the details inside the template.

 

Screen Shot 2018-05-19 at 4.17.45 PM

This will not run yet but let’s go through the code first because there are some changes worth noting.

The first new line is const{activities} = this.prop;

This line is what’s known as destructuring which allows us to save on typing and instead of using this.props.activities every time we want to get a prop from the parent element all we have to do is use the word activities.

All the places where we want to pass in data will be inside curly braces with the word “activities” like this {activities.user.name} that will be Claudia.

The reason that it’s not working yet is because we have two objects and the whole array is called activities, so we need to use a map function to loop through each item. If you want to learn more about the map function visit the MDN Docs.

Screen Shot 2018-05-19 at 4.11.05 PM

Now if we run this we will get our two posts without having to hard code it in.

Screen Shot 2018-05-19 at 4.19.54 PM

Our content component is getting very complicated. It is doing two things it holds the data and it displays it as well. We can separate this to make things easier to read and understand.

Let’s take the code that displays all the data and put it in it’s own component. Which will look like this

Screen Shot 2018-05-19 at 4.33.42 PM

So now our content component is smaller. Don’t forget to import the ActivityItem.

Screen Shot 2018-05-19 at 4.33.49 PM

I know that it seems like a lot to do, but with practice this will be easier each time. Just think about as passing in variables, and using them with this.props.<variable name>

Let me know what you think.

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s