React part 7

5 min readMay 24, 2021

Today we talk about passing functions as props also stalk about the useEffect hook (basics).

we left off here :

BlogList is inheriting “blogs” from hooks in “Home.js,” and the “title” is what we want it to display as a header.

we commented on outlines 34–37 because the bottom BlogList was just for show/the last lesson. (keep it or delete doesn't matter)

now moving on!

Let's hop over to the BlogList component, and everything looks the same minus the handleDelete on line 3 and the button tag on line 15

We needed a way to delete the blog post when they each got rendered out through the map function.

So we added a button tag, and gave it a button name of delete blog. we also added an onClick event so It fires the delete function. ( we had to provide it with an anonymous function, or we wouldn't have been able to pass in an argument.) Next, we pass into that function the blog.id, we use it later in the handleDelete function.

It should all look like this:

All though, when you click on delete, it will either error out or give you nothing since we haven't made that handleDelete function do anything.

We could make a handleDelete function in the BlogList component but, we don't want to edit the whole blogs list. We are getting blogs passed down from home.js, so we don't want to taint the one we already have.

we should make a new array with the blogs data in Home.js (basically make a copy of it )

so let's pop out of blogList and hop into home.js. we make a function called handleDelete in there, and it should look like:

remember to pass in “id” as an argument since you will be using that in the actual function. We set up a variable called newBlogs, which equals “blogs” that we get from the hooks state above. Next, we use the filter function on blogs which we then set a random name for each element that gets “printed out.”

We see if blog. id (the id of the blog we are iterating over) does not equal the “id” from the id we are passing in we keep that blog in the array. but if it does match, take it out(since we are deleting it)

Lastly, we have this newBlogs variable, and we want to change a copy of the blogs, so we use the setBlogs() function from the hooks. we put in newBlogs on line 28, and now it will fire every time you click on the delete button. (basically saying when you done filtering out blogs, set the new list of blogs)

so now, if you go back to the browser, you should be able to click the delete button, and everything should work.

UseEffect hook:

useEffect runs a function every time the component rerenders. Renders happen when you first load up the page but, also occurs when the state changes at all. Then rerenders to update the dom in the browser.

Most of the time, we just use it to run code on every re-render!

we start with importing useEffect on the top of Home.js next to useState like so:

next, we set up useEffect under the handleDelete function. We set it up like if we are calling a normal function. Then we throw in an anonymous function inside of it, as an argument. lastly, we slap a console.log in there and some text saying “use effect ran.” (use effect is mainly used when you want to grab data as soon as the page renders, like data, fetch calls, and state.)

Pop into browser tools or chrome tools inspector of your liking... It should look like this:

Go ahead and refresh the page with the console open. Take a look, there is our “use effect ran” /console.log

If you go and delete your blog post, it will also fire; as you can see, it ran another two times when I deleted it.

for extra credit; I slapped in the blogs in the useEffect to show you that we can rerender that as well.

The browser should look like this :

As you can see there is are an array of blogs and our “use effect ran” text.

You don't ever want to update the state though, inside the useEffect. You may encounter an infinite loop or something if you do, do that.

Ok, that was the basics. Just remember that if you ever want to run a function over and over every time the component rerenders, use the useEffect function.

check out some 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 (commonly used arrays in javascript)

Javascript 10 (Math. And parseInt Usage)

Javascript 11 (for loops and nested for loops)