React part 6

5 min readMay 17, 2021

Today, We talk about “props” and how to make a reusable component.

Props - props are a way to pass data between two components, so we can share it amongst our program. In coding, you can only “drill down,” which means you cant pass data upwards. (This is a great way to use Hooks to make your life easier but, we will stick to the props for now.) I will show you how to implement props in your code though.

OK, let us start with making a new file called “BlogList.js.”

Then, if you have react snippets, type “RAFCE” and press enter! (if you don't go to vscode, go to extensions and type in react snippet. You should download!)

Pro tip: We always want to fill a div with “hello” or any text when you first create a new component. So you can see if it's connecting to the root component, and be displayed in the browser. (run “npm start”, to see if your text shows up.)

Next, Go into the Home.js component and cut out this if you're following along:

We want to move this and put it in your new “BlogList.js.” component we just created.

After you place that there, go back into Home.js, we need to import “BlogList” to the top of the component (line 2 down below). Then in between the div, write the component’s name “BlogList,” which should look like this:

Here we import BlogList and attach it to the root component, and then we set it up on line 32. Also, we pass in “blogs” on line 32 as well, and all we are doing here is taking the “blogs data” from the hook above on line 5 then basically passing that blogs data into that component so you can share it with it. It officially now gets passed into the “BlogList.” component. Now you just have to take it in on the “BlogList” side of things, which I will show you later.

Moving on, let's hop over to BlogList and paste in the map method you cut earlier and place it here (if you already didn't already), like so:

Line 3 is some excellent magic going on. we deconstruct it here so we can use it among the component. (the longer way is down below using props and a bit more code, so I recommend learning the way above and save yourself a headache.) I show you down below:

See the deconstructive way is better! Up above is just ugly.

OK, for any data that gets passed in from another component, we “deconstruct” it, and able to skip the “prop” fiasco, looking way cleaner and easier to read in my opinion.

If everything worked out, it should look like this:

Now for some more fun!

Reusable components:

We have this code from “Home.js” lets duplicate line 32 like so:

We then add a title property on line 34 and fill it with “Micheal's Blog Post”(it doesn't matter what you call it.) Now, inside the “blogs” property, we are going to filter out by just the author name, like soo:

We do this by calling the “filter()” function on blogs from the hook. Then we run through the steps by, setting a “placeholder” called “blog”, then if it returns true for “Michael Jordan” it will filter all the elements that have that name in “title”. It should look like this: