What is the use of setElement function in ReactJS ?

In ReactJS we have a useState Hook this hook is used to declare a state variable inside a function. It should be noted that one use of useState() can only be used to declare one state variable.

Prerequisites:

• NodeJS or NPM
• React JS
• useState Hook

Syntax:

const [ element , setElement ] = useState(initial_state);

Approach:

• Import React and useState:
  • Import React and the `useState` hook to enable state management in the functional component.
• Define State and Click Handler:
  • Use `useState` to create a state variable `element` initialized to 0.
  • Implement a click handler function `onClickButtonHandler` that updates the state by incrementing `element`.
• Render JSX:
  • Return JSX to render the component, displaying “GeeksforGeeks,” the current value of `element`, and a button that triggers the click handler to increment `element` on each click.

Steps to Create the React Application And Installing Module:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. folder name, move to it using the following command:

cd foldername

Project structure: It will look like the following.

Project structure

The updated dependencies in package.json file will look like:

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

Example: Change the state of the element using the setElement function.

Step to run the application: Open the terminal and type the following command.

npm start

Output:

Output