Link to favorites page not working in react

Question

Here is the code for my navbar The fav button is found under menu icons the first one. I have it in a link and then the nav item icon inside this link

import React, { useState, useEffect, useRef, useContext } from "react";

import "./Navbar.css";
import "../App.css";
import { CSSTransition } from "react-transition-group";

import { ReactComponent as HeartIcon } from "../icons/heart.svg";
import { ReactComponent as CartIcon } from "../icons/cart.svg";
import { ReactComponent as AccountIcon } from "../icons/account.svg";
import { ReactComponent as RightArrowIcon } from "../icons/rightArrow.svg";
import { ReactComponent as LeftArrowIcon } from "../icons/leftArrow.svg";
import { ReactComponent as OrdersIcon } from "../icons/orders.svg";
import { ReactComponent as SettingIcon } from "../icons/setting.svg";
import { ReactComponent as DarkModeIcon } from "../icons/darkMode.svg";
import { ReactComponent as LocationIcon } from "../icons/location.svg";
import { ReactComponent as CurrencyIcon } from "../icons/currency.svg";

import logo from "../logo/tryb_logo_medium.png";
import { Link, Route, Router } from "react-router-dom";
import { Button, Div, Icon, SideDrawer, Text } from "atomize";
import { Dropdown } from "react-bootstrap";

//Cart
import { Container, Anchor } from 'atomize'
import { ShopContext } from '../context/shopContext'

import "../context/AuthContext";
import fire from "../config/fire";
import Login from "./Login";

import Cart from './../components/Cart';
import { createGlobalStyle } from "styled-components";

import { Label,Switch } from "atomize";





function Nav() {

  //Use fucntion sopen cart from shopConext
  const { openCart, checkout } = useContext(ShopContext)

  return (
    
    
      
      {/* LOGO */}
      
        
      

      {/* Hamburger Menu */}
      
        
      

      
        New In
        Prints
        Bestsellers
        Inspiration
      
      {/* Menu Icons */}
      
      
        } />
      

      {/* Changes for shopping cart count */}

       openCart()}>
        
          
          {checkout.lineItems?.length || 0}
        
       
      
      }>

        Test
      
    
  );
}

function Navbar(props) {
  return (
    
      {props.children}
    
  );
}

function NavItem(props) {
  const [open, setOpen] = useState(false);

  return (
    
       setOpen(!open)}>
        {props.icon}
      

      {open && props.children}
    
  );
}


//dropdown menu for navbar 
function DropdownMenu() {
  const [activeMenu, setActiveMenu] = useState("main");
  const [menuHeight, setMenuHeight] = useState(null);
  const dropdownRef = useRef(null);
  const [open, setOpen] = useState(false);

  useEffect(() => {
    setMenuHeight(dropdownRef.current?.firstChild.offsetHeight);
  }, []);

  function calcHeight(el) {
    const height = el.offsetHeight;
    setMenuHeight(height);
  }

  function DropdownItem(props) {
    return (
       props.goToMenu && setActiveMenu(props.goToMenu)}
      >
        {props.leftIcon}
        {props.children}
        {props.rightIcon}
      
    );
  }

  const [user, setUser] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [emailError, setEmailError] = useState("");
  const [passwordError, setPasswordError] = useState("");
  const [hasAccount, setHasAccount] = useState("");

 

  //Logout
  const handleLogout = () => {
    fire.auth().signOut();
  };

  const authListener = () => {
    fire.auth().onAuthStateChanged((user) => {
      if (user) {
        setUser(user);
      } else {
        setUser("");
      }
    });
  };

  useEffect(() => {
    authListener();
  }, []);

  return (
<>
    
      
        
          }
            rightIcon={}
            goToMenu="my-account"
          >
             My Account
          
          }>
            My Orders
          
          }
            goToMenu="settings"
            className="dropdown"
          >
            Settings
          
        
      

      {/* Settings Menu */}
      
        
          }
          >
            Settings
          
          
          }>
            Location
          
          }>
            Currency
          
        
      

      {/* My Account Menu */}
      
        
          }
          >
            My Account
          
          {/*         
          
          
            Account
           */}

          {user ? (
            <>
              
                
                  Account
                
                
                  Logout
                
              
            
          ) : (
              <>
                
                   setOpen(!open)}>
                    Login
                  
                
              
            )}
        
      
    
  );

  
}

export { Nav };

Here is my favorites page

import React, {  useContext, useState } from "react";
import { Text, Button, Row, Col, Container, Image, ThemeProvider } from "atomize";
import { ShopContext } from "../../context/shopContext";

const theme = {
    grid: {
      colCount: 8,
      gutterWidth: 0
    }
  };
const FavoritesPage = () => {
  const [favorites, setFavorites] = useState(JSON.parse(localStorage.getItem("favorites") || "[]"));
    const { addItemToCheckout } = useContext(
        ShopContext
      );
    const favoritesList = favorites.map(product => (
      
        
        
        
          
        
        
          
            {product.title}
          
          
          € {product.variants[0].price}
          
           
        
      
      
    
    ))

    return favoritesList;
  
};

export default FavoritesPage;

It wont load the fav component any thoughts greatly appreciated thanks anything else that may be needed please ask thanks

Link to favorites page not working in react

0 Answers