React part 9

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:

and our BlogList.js should look like this:

it should look like this before moving forward. Also, just for fun, our browser should look like this:

Thank you for reading like, and give some claps if this helped you at all. See you all next time. I will drop a link to all this as I make them!

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)

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)

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)

The Social Media…

Github

Instagram

Facebook

Linked-In

Twitter

Medium

--

--

--

Software engineer, Creator, Ball of Energy

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

How To Style React Components

Get tweets with Javascript

Array vs Array-like objects in JavaScript

starting remote-ui project

Frequently Used React Native Components

A Technical Guide to SEO With Gatsby.js

Getting started with React Router 4 and React Native

Example

Reshaping arrays with numpy

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

More from Medium

What is the difference between React Router and conventional routing?

Testing DOM mutations with Jest

Contact Picker API In React

Better Redux-Saga Unit Tests with Redux Dynamic Modules