
REACT USESTATE HOOK:
Import useState:
To use the useState Hook, we first need to import it into our component.
import { useState } from "react";
Intialize the useState:
We initialize our state by calling useState in our function component.
useState accepts an initial state and returns two values:
Example:
import { useState } from "react";
function FavoriteColor() {
const [color, setColor] = useState("");
}
useState("")
Read State:
Example:
import { useState } from "react";
import ReactDOM from "react-dom/client";
function FavoriteColor() {
const [color, setColor] = useState("red");
return <h1>My favorite color is {color}!</h1>
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FavoriteColor />);
Output: My favorite color is red!
Update State:
import { useState } from "react";
import ReactDOM from "react-dom/client";
function FavoriteColor() {
const [color, setColor] = useState("red");
return (
<>
<h1>My favorite color is {color}!</h1>
<button
type="button"
onClick={() => setColor("blue")}
>Blue</button>
</>
)
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<FavoriteColor />);
Output: My favorite color is red!