React sklep, Web, React Router

Question

Dzień dobry, 

Robie mały projekt w React, generalnie maly sklepik, wyswietla mi dane z API i po kliknieciu na dany elemnt pojawia mi sie on w strone ItemDeatails, gdzie wszystko ładnie opisane i za pomoćą guzika addToCart chciałbym dodawac go do strony z koszykiem, szukałem paru rozwiązań, ale nic nie znalazłem, czy ktos byłby w stanie mnie naprowadzic na rozwiaznie tego problemu i przy okazji sprawdzic kod

Może to w kodzie jest jakis problem, który nie pozwala mi dojsc do rozwiązania tej zagwozdki.

 

 

const fakeStoreApi = "https://fakestoreapi.com/products";

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get(fakeStoreApi).then((res) => {
      setData(res.data);
    });
    
  }, []);

  return (
    <div className="App">
       <NavBar/>
      <Routes>
        <Route path="/" element={<Home data={data}/>}/>
        <Route path="cart" element={<CartItems/>}/>
        <Route path="liked" element={<LikedItems/>}/>
        <Route path="item-details/:id" element={<ItemDetails data={data}/>}/>
      </Routes>
      <Footer/>
    </div>
  );
}

function ItemDetails({ data }) {
  const {id} = useParams()
  const [addItem, setAddItem] = useState(false);

  const handleClick = () => {
    setAddItem(!addItem)
  }

  return (
    <div>
      <div className="selected_item">
        {data
          .filter((item) => item.id == id)
          .map((item) => (
            <div key={item.id} className="selected_item--item">
              <div className="selected_item--image">
                <img
                  className="selected_item_image--img"
                  src={item.image}
                  alt="/"
                ></img>
              </div>
              <div className="selected_item--content">
              <div className="selected_item--description">
                 <h3 className="selected_item--h3">{item.title}</h3>
                 <p className="selected_item--des">{item.description}</p>
                 <p className="selected_item--price"> {`Price: ${item.price}`}
                <span>{<BiEuro />}</span></p>
              </div>
              <div className="add_and_back">
                <button onClick={handleClick} className={!addItem ? "add_btn" : "remove_btn"}>{!addItem ? "Add to cart" : "Remove from cart"}</button>
                {/* <button>Back</button> */}
              </div>
              </div>
            </div>
          ))}
      </div>
    </div>
  );
}

export default ItemDetails;

function Home ( {data} ) { 
const navigate = useNavigate()
  return (
    <div className="home_page">
      <div className="items">
        {data.map((item) => (
          <div key={item.id} className="card" onClick={() => navigate(`/item-details/${item.id}`)}>
            <div className="card_menu--icons">
              <button className="card_menu_icons--like"><BiLike /></button>
            </div>
            <div className="image_container">
              <img src={item.image} className="item_img" alt="#"></img>
            </div>
            <div className="item_info">
              <p className="item_cat">{item.category}</p>
              <p className="item_title">{item.title}</p>
              <p className="item_price">
                {`Price: ${item.price}`}
                <span>{<BiEuro />}</span>
              </p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default Home;