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

React - buttony w funkcji map

VPS Starter Arubacloud
+1 głos
225 wizyt
pytanie zadane 28 lutego 2022 w JavaScript przez Karson Obywatel (1,000 p.)

Cześć,

używam funkcji map, która wyświetla mi wszystkie elementy tablicy. Mam też buttony które służą do wybierania ilości danego produktu, dodałem je przy każdym elemencie (kod wkleję ponizej). Tylko teraz mam taki problem, ze gdy kliknę + na jednym to działa on na wszystkie elementy tablicy w tym samym momencie a chce żeby każdy był klikalny osobno i ilość zwiększała się osobno.

const Menu = () => {
  const [quantity, setQuantity] = useState<number>(0);

  const SubtractItem = (): void => {
      setQuantity((prevState) => prevState - 1);
      if (quantity <= 0) setQuantity(0);
  };

  const AddItem = (): void => {
    setQuantity((prevState) => prevState + 1);
  };

  return (
    <MenuWrapper>
      <HeaderH1 className="menu-header">Nasze Menu</HeaderH1>
      <MenuItems>
        {MenuData &&
          MenuData.map((menuItem) => (
            <Wrapper key={menuItem.foodName} className="menu-item">
              <img src={menuItem.image} alt="zdjęcie dania" />
              <h2>{menuItem.foodName}</h2>
              <p>{menuItem.foodDescription}</p>
              <h3>{menuItem.price}</h3>
              <ButtonsWrapper>
                <Button className="menu-item-btn" onClick={SubtractItem}>
                  -
                </Button>
                {quantity} szt.
                <Button className="menu-item-btn" onClick={AddItem}>
                  +
                </Button>
              </ButtonsWrapper>
            </Wrapper>
          ))}
      </MenuItems>
    </MenuWrapper>
  );
};

 

1 odpowiedź

0 głosów
odpowiedź 28 lutego 2022 przez KrystianKasp Nowicjusz (140 p.)
Twój problem polega na tym ze masz jedna zmienna przechowujaca ilosc,  a nie jak pewnie zakladasz ze zmienna dla kazdego buttona jest unikalna, proponuje zamienic quanity z numbera na tablice obiektow np. [{value:0,name:"menuItem1"},{value:0, name:"menuItem2"}...], a w przypadku funkcji AddItem:

musisz jeszcze stworzyc propsa ktory bedzie przechowywal odpowiedni name i jego podac jako argument w funckji AddItem
const AddItem=(name)=>{
const newQuanity=quanity.map(item=>{

if(item.name===name){

item.value++
}
return item
 })
}  

setQuantity(newQuanity)
komentarz 28 lutego 2022 przez Wiciorny Ekspert (269,120 p.)
on iteruje po elementach tablicy funkcja map... ale pakuje wszystko do jednego MenuItems ;]
komentarz 28 lutego 2022 przez Karson Obywatel (1,000 p.)

@KrystianKasp, Nie do końca o to mi chodzi. Najlepiej żeby ilość zapisywała się w mojej tablicy z resztą danych czyli w MenuItems

Podobne pytania

+1 głos
1 odpowiedź 259 wizyt
pytanie zadane 16 lipca 2021 w JavaScript przez hakiros54 Obywatel (1,160 p.)
0 głosów
1 odpowiedź 267 wizyt
pytanie zadane 16 listopada 2021 w JavaScript przez Meksykanin Początkujący (250 p.)
0 głosów
1 odpowiedź 229 wizyt
pytanie zadane 20 maja 2020 w JavaScript przez poldeeek Mądrala (5,980 p.)

92,454 zapytań

141,262 odpowiedzi

319,089 komentarzy

61,854 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.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...