In this article, let’s see how we can implement a stack in the ReactJS application.
Approach: To implement the stack we will use a custom hook, i.e. the useStackState hook provided by the Rooks package for React. It manages the state in the form of a stack. It takes an array as an argument and returns array items containing list, listInReverse, and object with attributes push, pop, peek, and length.
Below is the step-by-step implementation of the above approach:
Modules Required:
- npm
- create-react-application
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-application demo
Step 2: After creating your project folder i.e. demo, move to it using the following command:
cd demo
Step 3: Install Rooks from npm.
npm i rooks
Open the src folder and delete the following files:
- logo.svg
- setupTests.js
- App.test.js
- index.css
- reportWebVitals.js
- App.cs
Project Structure: The project should look like this:
Example: The below example will illustrate the Data structure stack implementation in the React JS
index.js
import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <App /> </React.StrictMode> ); |
App.js
import React, { useRef } from "react"; import { useStackState } from "rooks"; export default function App() { const numberToPushRef = useRef(3); const [list, { push, pop, peek, length }, listInReverse] = useStackState([1, 2, 3]); function addToStack() { numberToPushRef.current = numberToPushRef.current + 1; push(numberToPushRef.current); } return ( <> <h1 style={{ color: 'blue', margin: '20px' }}> Stack</h1> <div style={{ display: 'block', fontSize: '20px', margin: '20px' }}> {listInReverse.map((item) => { return <div style={{ width: '30px', height: '30px', background: '#a3fc9d', borderRadius: '5px', margin: '10px', textAlign: 'center' }} key={item}>{item}</div>; })} </div> <button style={{ margin: '20px', background: '#f8e1ee', width: '200px', borderRadius: '5px', padding: '10px' }} onClick={addToStack}>Push</button> <button style={{ margin: '20px', background: '#bbfdd8', width: '200px', borderRadius: '5px', padding: '10px' }} onClick={pop} warning> Pop </button> <p style={{ color: '#e84917', fontSize: '20px', margin: '20px' }}>Top Element : {peek()}</p> <p style={{ color: '#175ce8', fontSize: '20px', margin: '20px' }}>Stack Size : {length}</p> </> ); } |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
