React part 9

5 min readJun 9, 2021

we continue with fetching data from useEffect and JSON!

so we left off by running this :

You will need to run npm start (for localhost 3000 to run)

More importantly we need this to run:

npx JSON-server — watch data/data.json — port 8000

(if you copy and paste this, there should be two dashes in front of the watch and port, not just one dash, Medium autocorrects it.)

That starts up the JSON server for us.

Which watches this file:

Ok, so the first thing we need to get rid of is “blog” state in Home.js, if you already didn't do that, and bring our “blog” hook to null(since we no longer need local state)do so like this:

We also should clear out line 16 (which prior had name in it, and get rid of the console.log(name) from previous lesson. )

now we have to go to the useEffect, and we do a fetch call (or Axios call)

Here we are doing a simple fetch call on lines 14–22 which fires when the browser first mounts and only then. We are also using the JSON endpoint that they provide for us here when starting up the server :

Now we fetch that data down below, once that promise is resolved, we then get a “response object” (which is not the data, just an object.)

Next, to get that data we need to return the response in JSON(). Which, then we fire another .then(), but this is where we actually get our data. Finally, we use the hook above-called set blogs() and fill it with our new data. (if that didn't make sense, I have a javascript lesson on fetch calls here) p.s. we keep the line 22 array empty because we want it to only change on the initial render, not every time the state changes.

Now, after that, we hop down to line 26 originally it looked like this:

But this will give you an error because it is passing in null from the original state. So on line 26 where it says blogs={blogs} it's trying to pass down null to the component “BlogList,” which then we are trying to map:

But, it does not like that because you can not map null or undefined. You have to remember that the fetch call takes time to get that data. so we have to tack on the && symbols:

{blogs && <BlogList …… etc/>}

This will fix all our problems; why this is working? It is because it looks at blogs before passing down data which we are getting from the hook’s down below on line 5!

It looks at the state of blogs, and if blogs equal to null, then it returns false, and it will not run <BlogList….etc/>(anything after the && symbols). If blogs do have data in them, it will return true, and it will run the other side of the && equation. (which will pass on the data.)

It is called conditioning templating.

Lastly, we have to eliminate the delete functionality because we are no longer dealing with the local state. We are dealing with JSON data. (it will still work, but we will do it a different way.)

so our HOME.js should all look like this: