useStating the obvious

Using useState in React was probably was one of the most difficult concepts to wrap my head around when learning React. Here, I will do my best to explain useState the way I understand it and how to implement it. State is typically used when something in the page needs to change. For instance, if you have a button that will increase the number of “likes”, you can very well know that a useState was used. If there is a toggle feature that maybe turns things from dark to light mode on the screen, then useState is most likely making an appearance in your code. So a way that I see it if you want an event to trigger a change then a useState is usually required.

As an example through this explanation lets say that we would like to add a feature to our page that will turn a button from “on” to “off” and it will show this by changing the text within the button from “on” to “off”. Now as we covered earlier this will cause a change to occur in our page so we know that we can use useState for this occasion.

Now to begin before we make our use state we have to import it into our component that we will be calling useState from. At the top along with your other imports we will be importing just as shown below

import React, { useState } from "react";

We will probably have a component labeled Button, and within Button we will most likely be returning an element of button and within that element is where we will be placing our event listener which we can pass a function like the figure below shows. In this example we see that we have given our button the text “On” inside of it. More importantly we added an onClick that passes a function named handleClick.

<button onClick={handleClick} >On</button>

Okay so we know that we want to change our button and we have placed our onClick and passed handleClick as our function so now lets make our useState and dissect it to further understand.

const [ isOn, setIsOn ] = useState(true)

Okay so here we are declaring our useState in this destructured array, we have labeled it isOn but can name it whatever you like, preferably something that makes sense and gives a hint to what its changing. after that we label the function that we will be using to change the value of “isOn” as per react custom we label this the same as the first but add the word set in front of it, hence “setIsOn” still using camel casing. Lastly we place our equal and give our useState its initial value “useState(true)”, here we are giving useState the initial boolean value of true. What we are saying here is that we want “isOn” to start with the value of “true”, we could given it the value of “false” if we wanted to, a number, an empty string, an empty object whatever it is that makes sense to what you’re trying to change.

Now that we have stated that “isOn” has the value of true and have a button with the label of “on” how can we change that text value to “off”. Correct!! we have to use our onClick function called handleClick. So lets make our function make this change when the event is called.

function handleClick() {
    setIsOn(!ison)
}

Alright so in this function we are saying that when this function is called we want whatever value “isOn” has we will be returning the opposite. So if value is “true” then we’ll get “false” if we have “false” we’ll get ”true”. Now lets check our inventory again, we have a useState with the initial value of “true” and a button element with an onClick that passes a function that will flip that useState from “on” to “off”

Now how do we incorporate these two pieces to change the text in our button. There's multiple ways to do this but to finish this example lets use a ternary expression. So our button element will look like this.

<button onClick={handleClick}>{isOn ? "on" : "off"}</button>

Okay so now lets see here, we are passing a ternary expression as our text value for button. We are saying that if isOn has the value of true then we will have “on” as text in our button but if not (if the value is false) then the text will be “off”.

So to recap, useState is a necessity when you want a feature to make a change on your page. Once you get in the rhythm of setting you initial value and understanding how to manipulate that value with functions and or events. You can gain a better understanding and comfortability with useStates.