React part 6

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:

See, it filtered only Michaels's blogs and displayed them in browser.

Side note, I added the title to the first blog list or line 33. So I could separate the two lists.

Also when you add “title”, don't forget to pass it into “BlogList” then, and if you want through it in into an “h1” like line 6 below.

Ok, that's it for today hope that makes sense, and you learned something from this today.

Remember to try to make your components reusable to get that extra shine!

Javascript….

Javascript 1 (variables and data types)

Javascript 2 (numbers and strings)

Javascript 3 (bracket notation and 20 diff string methods)

Javascript 4 (functions and how they work)

Javascript 5 (hoisting, comparison operators, and if-else statements)

Javascript 6 (diff. Equal signs, null, and undefined)

Javascript 7 (logical operator, &&, || and ternary operators)

Javascript 8 (switch statements and arrays)

Javascript 9 (10 commonly used arrays in javascript)

Javascript 10 (8 different Math. methods And parseInt Usage)

Javascript 11 (for loops and nested for loops)

Javascript 12(while loops and for..in and for..of loops)

Javascript 13(8 diff array methods)

Javascript 14(objects and ways to use objects)

Javascript 15(JSON and fetch request)

Javascript 16(“this” keyword)

Javascript 17(strict mode and error handling)

Javascript 18(setInterval/setTimeout and Dates)

React…

React part 1 (How to start a react app)

React part 2 (components and dynamic values)

React part 3 (Multiple components and small styling)

React part 4 (click events with functions and react dev tools)

React part 5 (link to: useState hook and how to output lists in react)

React part 6 (Props and reusable components)

React part 7 (passing functions as props and use effect hook)

React part 8 (continue with useEffect hook, dependencies with useEffect, and setting up the JSON server to fetch)

React part 9 (Fetching data with JSON)

React part 10 (loading bar and fetch errors)

React part 11(custom hooks)

React part 12(React Router Dom, Exact, and Links)

Social Media…

Github

Instagram

Facebook

Linked-In

Medium

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jonathan Bleibdrey

Jonathan Bleibdrey

Software engineer, Creator, Ball of Energy