Implement Stack Data Structure using ReactJS

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: