useState
The React useState Hook enables us to track state within a function component.
State generally refers to data or properties that must be tracked in an application.
Import useState
To use the useState Hook, first import it into our component.
Example:
Import the useState Hook from the top of your component.
import { useState } from "react";
Notice that we are destructuring useState from react because it is a named export.
For more information on destructuring, see the ES6 section.
Initialize useState
In our function component, we call useState to initialize the state.
UseState takes an initial state and returns two values:
- The current state.
- A function for updating the state.
Example
Initialize the state at the top of the function component.
import { useState } from "react";
function FavoriteColor() {
const [color, setColor] = useState("");
}
Again, we are destructuring the returned data from useState.
The first value, color, represents our current condition.
The second item, setColor, represents the function used to update our state.
These names are variables that can be named whatever you choose.
Finally, we make the initial state an empty string: useState(“”)
Update State
To update our state, we use the state updater function.
We should never directly update the state. Ex: color = “red” is not permitted.
Example
Use a button to update the state:
------ Example mukavu ------
What Can State Hold
The useState Hook can keep track of strings, numbers, booleans, arrays, objects, and any combination thereof!
We could use many state hooks to track individual values.
Example
Create several state hooks.
import { useState } from "react";
import ReactDOM from "react-dom/client";
function Car() {
const [brand, setBrand] = useState("Ford");
const [model, setModel] = useState("Mustang");
const [year, setYear] = useState("1964");
const [color, setColor] = useState("red");
return (
<>
<h1>My {brand}</h1>
<p>
It is a {color} {model} from {year}.
</p>
</>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);
Alternatively, we can utilize just one state and include an object!
Example
sCreate a single Hook to hold an object:
import { useState } from "react";
import ReactDOM from "react-dom/client";
function Car() {
const [car, setCar] = useState({
brand: "Ford",
model: "Mustang",
year: "1964",
color: "red"
});
return (
<>
<h1>My {car.brand}</h1>
<p>
It is a {car.color} {car.model} from {car.year}.
</p>
</>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);
Since we are now tracking a single object, we must refer to that object and then its property when rendering the component. (Example: car.brand).
Updating Objects and Arrays in State
When state is modified, the entire state is overwritten.
What if we just want to change the color of our car?
If we merely call setCar({color: “blue”}), we will remove the brand, model, and year from our state.
We may utilize the JavaScript spread operator to assist us.
Example
Use the JavaScript spread operator to update only the car’s color:
------ Example mukavu ------
Because we need the current state value, we call our setCar method with a function. This function gets the previous value.
We then return an object that spreads the previousState while overwriting only the color.
