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;