CODEWITHSUNDEEP
reactjs
LuminousButter
LuminousButter

Reputation: 61

Defined but not used in React

I'm trying to build my homepage but I'm getting the below errors in my terminal and my react page is blank. Any suggestions on what I change to fix these errors? Thanks in advance

Line 4:8: 'Cart' is defined but never used
Line 7:27: 'Router' is defined but never used
Line 7:50: 'Link' is defined but never used
Line 17:8: 'page' is assigned a value but never used
Line 28:9: 'addToCart' is assigned a value but never used

import React, { useState } from "react";
import "./Homepage.css";
import Shop from "./Shop";
import Cart from "./Cart";
import About from "./About";
import ContactUs from "./ContactUs";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

const PAGE_SHOP = "shop";
const PAGE_CART = "cart";
const PAGE_HOMEPAGE = "home";

export default function Homepage() {
  const [cart, setCart] = useState([]);
  const [page, setPage] = useState(PAGE_SHOP);

  const navigateTo = (nextPage) => {
    setPage(nextPage);
  };
  const getCartTotal = () => {
    return cart.reduce((sum, { quantity }) => sum + quantity, 0);
  };
  const addToCart = (product) => {
    let newCart = [...cart];
    let itemInCart = newCart.find((item) => product.name === item.name);
    if (itemInCart) {
      itemInCart.quantity++;
    } else {
      itemInCart = {
        ...product,
        quantity: 1,
      };
      newCart.push(itemInCart);
    }
    setCart(newCart);
  };

  return (
    <div className="Header">
      <header>
        <button onClick={() => navigateTo(PAGE_CART)}>
          Go to Cart ({getCartTotal()})
        </button>

        <button onClick={() => navigateTo(PAGE_SHOP)}>Shop</button>
      </header>
      <router>
        <Routes>
          <Route path="/" element={<PAGE_HOMEPAGE />} />
          <Route path="/About" element={<About />} />
          <Route path="/Shop" element={<Shop />} />
          <Route path="/ContactUs" element={<ContactUs />} />
        </Routes>
      </router>
    </div>
  );
}

Upvotes: 0

Views: 661

Answers (1)

Aneesh
Aneesh

Reputation: 1715

You have set const PAGE_HOMEPAGE = 'home';

If you look at the following line <Route path="/" element={<PAGE_HOMEPAGE />} />

You are passing a string instead of an element.

Replace PAGE_HOMEPAGE with a react component that you would like to render on path '/'

To remove the warnings, just remove the code mentioned in those warnings, if you don't intend on using it.

If you do plan on using it, ignore the warnings for now and they will go away once the code is used.

Upvotes: 1

Related Questions