Hello, dear learner! Are you ready to delve into the world of React? Today, we'll explore the React state — data that a component manages and modifies. Think of a traffic light: its color (red, yellow, or green) is the state of the traffic light.

Our chief aim is to learn how to utilize useState and setState to manage the state in React components using hardcoded data. Excited? Let's begin!

In React, "state" refers to the data of a component that can be monitored and altered. Picture a simple counter: the count value is our state data. When someone clicks the increment button, the count changes, which triggers a re-render.

JavaScript
Copy to clipboard
1import React, { useState } from 'react';
2
3function Counter()  {
4  const [count, setCount] = useState(0); // Declare 'count' state variable with initial value 0 
5
6  return (
7    <div>
8      <p>You clicked {count} times</p> {/* Display the current count */}
9      <button onClick={() => setCount(count + 1)}>
10        Click me
11      </button> // Increment count when button is clicked
12    </div>
13  );
14}
15
16export default Counter;

In this code snippet, our state variable count is declared and initialized with 0 using useState(0). When the button is clicked, the count increases, initiating a re-render of the component.

useState is a React hook that introduces state to functional components. useState is used to declare a state variable. It returns a pair: the current state value and a function to update it.

JavaScript
Copy to clipboard
1const [myState, setMyState] = useState(initialState);

Let's declare a state variable color with an initial state:

JavaScript
Copy to clipboard
1import React, { useState } from 'react';
2
3function ColorChanger() {
4  const [color, setColor] = useState("red"); // Declare 'color' state variable with initial value 'red'
5
6  return (
7    <div>
8      <h1>The current color is {color}</h1> {/* Output the color */}
9    </div>
10  );
11}
12
13export default ColorChanger;

Suppose we have a favoriteColor component that uses useState to manage hardcoded data:

JavaScript
Copy to clipboard
1import React, { useState } from 'react';
2
3function FavoriteColor() {
4  const [favoriteColor, setFavoriteColor] = useState("blue"); // Define 'favoriteColor' with initial (hardcoded) value 'blue'
5
6  return (
7    <div>
8      <h1>My favorite color is {favoriteColor}</h1> {/* Output the favorite color */}
9    </div>
10  );
11}
12
13export default FavoriteColor;

FavoriteColor always displays "My favorite color is blue" — because favoriteColor is hardcoded as "blue".

Do you want to shuffle colors? You can! setState is used to update state variables.

By using setState, we ask React to reassign our state variable and re-render our component.

Let's illustrate the updating of state with hardcoded data:

JavaScript
Copy to clipboard
1import React, { useState } from 'react';
2
3function FavoriteColor() {
4  const [favoriteColor, setFavoriteColor] = useState("blue");
5
6  return (
7    <div>
8      <h1>My favorite color is {favoriteColor}</h1> {/* Output the favorite color */}
9      <button onClick={() => setFavoriteColor("green")}> {/* Change color on button click */}
10        Change Favorite Color
11      </button> 
12    </div>
13  );
14}
15
16export default FavoriteColor;

In FavoriteColor, we've added a button. When it's clicked, setFavoriteColor("green") is called, changing the favoriteColor state to "green" and causing a re-render of the component.

Excellent job! You have managed to grasp the concepts of state, useState, and setState in React. These give you the ability to create components that are aware of their purpose.

You have learned:

• What "state" means in React.
• How to declare a state variable using useState.
• How to use useState and setState to alter the state of a component.

Next, practicing these concepts will help to cement them. The more you practice, the better you'll become. Remember, becoming a skilled React developer requires practicing regularly. Let's continue on our learning journey!