For all beginners, useState can seem intimidating. For one, you must import it to use it. Thankfully, we do not have to worry about looking deep into what is inside of that import or everyone’s beginner minds would explode. I am here to (hopefully) provide a simple example and a little explanation on what is going on with this react hook useState.
Knowing the rules
First, remember that useState is a React hook. Therefore, it needs to follow these rules:
- They can only be called within React function components
- They can only be called at the top level of a component
- They cannot be conditionals
Second, it is not to be confused with props. Some facts about state:
- State can hold data and change over time
- The stored data is within components that need to be re-rendered
- State can only be used in function components
- States can be updated with event handlers
DO NOT forget to import useState into the component before using it like so:
import React, { useState } from “react”;
Do not worry about creating a new line to import it if you are already importing from React. You can separate with a comma, but do not forget the curly brackets or it will not recognize it!
Creating A useState
Create the useState under the component that will be changing states. While you can name the variable anything, it is helpful to name it based on the state that will be changing. In this example, the state change will be the changing colors based on what is checked.
Before thinking about changing const to let, const will be a reminder that the value should never be reassigned in the code. There will always be a single state each change, so there will never be multiple values involved with the state.
The first value, color, is the current state. The second value setColor can also be seen as setColor() since it is the function that will be used for changing the state. The code useState(" red ") is saying that the initial state is going to be the color red. You will see how this works further down.
One more detail about the line of code: Do not worry about having only type string in the initial state. It can be what suits your needs – empty string, Boolean, integer, etc. The main thing to remember is that the result will always be the same type. Do not mistype your state.
Using useState
One example we can use useState is by changing the color of text based on if a button is clicked. This will involve two states. We want the state to change when the button itself is clicked, not the text. This is a perfect example of two different types being used as initial states!
The new state we created is named isClickedbecause we are going to make the color change between green and red each time it is clicked. From a user perspective, they click once and the button changes. They click another time, and it changes to the other color.
From a programmer perspective, we are finding a way to switch between states. In this case, the button is clicked and considered clicked, while the other click determines that it is not (even though we are technically clicking both times). The Boolean allows us to switch between the two states or true and false to make this change.
When including the rest of code, it will look something like this:
Since the button is going to be used to change the text, the button should hold the function. As with the state, we need to name the function based on what the button will be doing. Since it handles the change of colors, we will name is handleColorChange. This will go inside of the component, not outside because it will not be recognized by either the TextColor component or its parent.
When the text is first shown, it will be the state that is the initial state of isClicked which is red. We should see a red text when it is rendered. When clicked, the setClicked function will change isClicked to true, which results in green. Every time the button is clicked, it will switch between the two states. Because setColor is linked to either true or false, this causes the color to switch between the red and green states.
Note: It is important that the if true is set to the same state as what is in the initial state, or it will need to be clicked twice for you to see the change rendered. Because red is false, you are changing the state to true and linking true to red and green to false. This is a small but important detail to remember when making true and false state changes.
Adding into the code. This is where the color variable resides within the code. As the button is clicked, the style will change to the color of the current state. Make sure the event appears on the button and not the text. Otherwise, you will be clicking the text and wondering why the button does not work!
Final Thoughts
If everything went according to plan, then you should have a basic understanding of how useState functions within a component. It is versatile and easy to use once you get passed the intimidation phase. You can use it alongside other React hooks, but I will save that for another day.
Enjoy using states!
Resources:
Top comments (0)