When first learning javascript, you may want to know how to make certain things happen when somebody clicks a button perhaps, or even mouses over a specific point on your web page. After learning that this is done with addEventListeners, in my case, I moved on to react.js and ignorantly assumed you would use the same functionality for user interaction. Instead of an addEventListener, React has it's own function for user interactivity called useState().
useState may be one of the most useful functions, which is called a "hook", that allows you to plug into different functionality in your code to be able to change the state of that code.
For instance, if you were coding out a button and decided you wanted the button to change it's inner text with an onClick function, this could be done by simply setting a state of...
const [isClicked, setIsClicked] = useState(false)
In this example, I have created a state for whether or not the button has been clicked and then a setter function (setIsClicked) to alter that state. To actually change the button, you would create a handle click function that would change the state...
const handleClick = () => {
setIsClicked(isClicked => !isClicked)
}
This callback function simply calling the setter function, and inside of the setter function, we changing the boolean of the state, so since we initially set our useState to false, it will now be true. However, there is one more step to completing our process of setting up useState.
Next we have to set our button to an if statement and in our case we are going to use a ternary, which is just a more minimal version of an if, else statement. So let's code that ternary...
{isClicked ? <button>In Cart</button> : <button>Add To Cart</button> }
In our ternary we simply wrote that if the button had been clicked (if our state switched to true) then we would want our button to display "In Cart". If the state hadn't changed and was still false, the button would contain the text, "Add To Cart".
This is a very simple and easy way to set up state in react. It can look scary and believe me, it was scary for me to at first, but it's one of those things that with time you will begin to understand it more, just know anytime you have a piece of code you want your user to be able to interact with, useState will be your go to.
You can see why useState is so important because your web application could have dozens of points for user interactivity.
Aside from buttons, useState can also be used to change things such as search bars, inputs, displaying database or api information, mouseover events and a whole list of others. useState is an extremely efficient and powerful hook in react.js which is why it is so crucial to learn. So put in some practice with it and get that web application rolling!
Oh! and happy coding!
Top comments (0)