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:
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.
Javascript
import React, { useState } from 'react'
import './App.css'
function App() {
const [element, setElement] = useState(0);
function onClickButtonHandler() {
setElement(element + 1);
}
return (
<div className= 'App' >
<h1>GeeksforGeeks</h1>
<p>Add = {element}</p>
<button onClick={onClickButtonHandler}>
ADD
</button>
</div>
)
}
export default App;
|
CSS
.App {
display : flex;
flex- direction : column;
align-items: center ;
justify- content : center ;
}
body {
background-color : antiquewhite;
}
p {
font-size : 25px ;
color : rgb ( 0 , 167 , 228 );
font-weight : bold ;
}
button {
width : 10em ;
height : 2em ;
background-color : rgb ( 27 , 24 , 24 );
font-weight : 600 ;
font-family : 'Lucida Sans' , 'Lucida Sans Regular' ,
'Lucida Grande' , 'Lucida Sans Unicode' , Geneva, Verdana , sans-serif ;
color : white ;
border-radius: 6px ;
border : none ;
}
button:hover {
background-color : rgb ( 96 , 145 , 125 );
}
|
Step to run the application: Open the terminal and type the following command.
npm start
Output:
Output
Last Updated :
28 Nov, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...