How I can use useState() in React?.

Answer

You can use the useState() hook in React to add state to functional components. The useState() hook is a built-in React hook that allows you to add state variables and update them within functional components. Here's how you can use useState() in React:

Step 1: Import the useState Hook First, make sure to import the useState hook from the react library at the top of your functional component file:

import React, { useState } from 'react'; 

Step 2: Declare State Variables with useState() Inside your functional component, use the useState() hook to declare state variables. The useState() function takes an initial state value as an argument and returns an array containing the current state value and a function to update that state value.

For example, let's create a simple counter component:

import React, { useState } from 'react'; const Counter = () => { // Declare a state variable 'count' and initialize it to 0 const [count, setCount] = useState(0); return ( <div> <h1>Counter: {count}</h1> <button onClick={() => setCount(count + 1)}>Increment</button> <button onClick={() => setCount(count - 1)}>Decrement</button> </div> ); }; export default Counter; 

In the above example, we use useState(0) to declare a state variable called count and initialize it with the initial value of 0. The useState() function returns an array with two elements: count, which holds the current value of the state variable, and setCount, which is a function used to update the state.

Step 3: Update State with the Setter Function To update the state variable, call the setter function (in our example, setCount) with the new value. React will re-render the component with the updated state value.

In the example above, we use setCount(count + 1) to increment the count when the "Increment" button is clicked and setCount(count - 1) to decrement it when the "Decrement" button is clicked.

That's it! You have now successfully used the useState() hook to add state to your functional component in React. Remember that each call to useState() creates a separate state variable, so you can use useState() multiple times in the same component to manage different pieces of state.