React part 5

7 min readMay 10, 2021

Today we talk about using “state” with hooks in react (mostly known as “useState”) and how to wonderfully output “lists” in our blog.

Ok, so useState is a hook from React, The End. Just kidding that would be horrible!

It is kinda like a place for your data to hang out, inside a specific component, and then you can access that information later on.

The data can be an array of values, booleans, strings, objects, if it needs to be changed in our component we use “setNameOfData” with “useState” (more on this later).

In the old ways, If we wanted to display a variable we would do something like this:

We set a variable on line 4 and then output it, then we show it to the audience on line 11 in a “p” tag or paragraph tag. The only problem with this is, we can't change it once it is set.

The p tag was right under where it says “home page” and It outputs just “Jonathan”(Forever!). Now we want to make the value of the name reactive, be able to change it, and that's where “useState” comes into play. React will keep an eye out after we set this up for any changes we make to that “hook”, line 4.

Hooks are a special type of function, that can hold your data and change your data. You can tell a hook by its name, usually because it starts with “use” in front of the name.

This is what would look like:

If you see on line 1, we import “useState” from React. Then we set up the hook on line 4, we first make an array, and inside that we destructure it(kinda the standard for hooks). The first initial value is whatever we set the name of the data as, inside the state when we have to call it ( so when we call our state right now it would just be “jonathan”. Since that's what we set it to by default). Our second argument “setName” allows us to change our value to whatever we want, at any particular moment in time, and we can do this in the “handleclick” function. Which we call the “setName” function and set it to “Mr. man”. Now, when we click on the button on line 14 in the browser, it will change our state to “mr.man” and erase “Jonathan” (note: it will go back to Jonathan when you refresh the page).

I clicked the button, and it changed from “Jonathan” to “Mr.man.”(trust me on it, or better yet it should have changed for you if you are following along.)

So essentially, when I clicked on that button react saw it, and re-rendered that component with new information. We can use as many hooks as we want in a component, for multiple data collections. Also, the initial value in the “useState()” function can be anything, like an array, object, boolean, or number. you simply set the default by putting it in the “usestate()” like on line 4, down below.

look here:

OK moving on!

UP above we basically did the same thing as we did in the previous example. We set up a hook for “age”, and then set the initial value to 30 ( line 5). We then add the “setAge()” function inside the “handleClick” function. When we click on the “click me” button, React updates both the name and the age like this:

It worked, trust me(Don't hate me! this might be an ongoing thing, until I figure out gifs)

Anyways,

Hooks are helpful and super easy to use if you remember these points.

One: we have a getter which is the first element in the array.

Second: a setter for the second element that you can use in any function.

Third: to set the default value just add it to the “useState(HERE)”.

These hooks come in handy when you want to change information in your component, instead of trickling it all down from different components.

Moving on!

outputting lists:

go ahead and strip the home page again, so it looks like this.

OK, let's go!

So down below, we make a hook called “blogs”, and with a “setBlogs”,. With an initial state of 3 objects. Lastly, those objects have been given four attributes, a title, body, author, and id. (we always have to give an object a unique identifier if we want to display them since it's easier to grab each one, hinse the id.)

Now how do we output the data in our return template?

We quickly right up a template for each item's information. It would not be beneficial to hard code our information in separate divs, because we would not be able to change or add anything afterwards! It would also be time-consuming, and the data might change at some point.

So, we have to find some way to cycle through the array with some javascript methods. That's where we Introduce the “map” method, all it does is cycle through an array, and each element, then does something with each element.

Look below to see what I mean:

The template looks like this, we first call blogs from the hook(I don't show the hook above, sorry), then we call the “map” method on the “blogs”, we then set a name for each object in the array (I called it plain “blog” singular, so it's easy to write out). Then we output a div, we also have to give a “key” property so it doesn't get mad at us. As we add more objects to that array, it's a way for the dom to know how to keep track of everything. Next, we fill the value of the “key” with the blog “id” which we set up earlier in the hook. Lastly, we output the attributes for the title and the author in each blog in a p tag and h2 tag. Like soo:

See, it outputted the “title” and “authors” names from each individual object from the “blogs” state with its own div, and thats how we output lists in react.

I also did some CSS; if you want to follow it, down below. or find the CSS here