• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed React sklep, Web, React Router

Aruba Cloud - Virtual Private Server VPS
0 głosów
189 wizyt
pytanie zadane 29 września 2022 w JavaScript przez ferdynand Obywatel (1,250 p.)
zamknięte 29 września 2022 przez ferdynand

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;

 

komentarz zamknięcia: Sam znalazłem rozwiązanie

Podobne pytania

0 głosów
1 odpowiedź 211 wizyt
pytanie zadane 16 września 2018 w Sieci komputerowe, internet przez karol928 Początkujący (320 p.)
0 głosów
1 odpowiedź 202 wizyt
pytanie zadane 21 lipca 2022 w JavaScript przez ferdynand Obywatel (1,250 p.)
0 głosów
0 odpowiedzi 106 wizyt
pytanie zadane 28 kwietnia 2017 w Inne języki przez chris Gaduła (3,680 p.)

93,324 zapytań

142,323 odpowiedzi

322,390 komentarzy

62,653 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...