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>
);
};