How to create Shopping Cart Button in ReactJS?

Last Updated : 14 Dec, 2023

A shopping cart button is one of the most used component in e-commerce websites or applications which allows users to add items to their cart . In this tutorial, we will learn how to create a shopping cart button in ReactJS using Material-UI.

Prerequisites

JavaScript and JSX
React JS

Steps to create React Application And Installing Required Modules:

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

npx create-react-app foldername

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

cd foldername

Step 3: After creating the ReactJS application, Install the material-ui modules using the following command.

npm install @material-ui/core
npm install @material-ui/icons

Project Structure

Project Structure

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

"dependencies": {
        "@material-ui/core": "^4.12.4",
        "@material-ui/icons": "^4.11.3",
        "react": "^18.2.0",
        "react-dom": "^18.2.0"
}

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

Javascript

// App.js
 
import React from "react";
import ButtonGroup from "@material-ui/core/ButtonGroup";
import Badge from "@material-ui/core/Badge";
import ShoppingCartIcon from "@material-ui/icons/ShoppingCart";
import Button from "@material-ui/core/Button";
import AddIcon from "@material-ui/icons/Add";
import RemoveIcon from "@material-ui/icons/Remove";
 
export default function App() {
    const [itemCount, setItemCount] = React.useState(1);
 
    return (
        <div style={{ display: "block", padding: 30 }}>
            <h4>How to create ShoppingCart Button in ReactJS?</h4>
            <div>
                <Badge color="secondary" badgeContent={itemCount}>
                    <ShoppingCartIcon />{" "}
                </Badge>
                <ButtonGroup>
                    <Button
                        onClick={() => {
                            setItemCount(Math.max(itemCount - 1, 0));
                        }}
                    >
                        {" "}
                        <RemoveIcon fontSize="small" />
                    </Button>
                    <Button
                        onClick={() => {
                            setItemCount(itemCount + 1);
                        }}
                    >
                        {" "}
                        <AddIcon fontSize="small" />
                    </Button>
                </ButtonGroup>
            </div>
        </div>
    );
}