1. Что с именами? NewsItem, setItem, result, clickFilter, styles, buy - никогда не пишите подобного даже в шутку. Замените: NewsItem на Product(или ShopItem), setItem - вообще удалите, result на products, clickFilter на handleAddToCartClick, styles на className, buy на cart.
2. Нет никакого смысла передавать в ShopItem каждое свойство товара по отдельности. Только усложняете анализ вашего кода. Лучше:
{products.map(product => (
<ShopItem
key={product.id}
className={'item'}
item={product}
onAddToCartClick={this.handleAddToCartClick}
/>
)}
3. Base path на то и base path, что не должен содержать конкретный эндпоинт. Правильно:
const BASE_PATH = 'https://api.punkapi.com/v2';
/* ... */
fetch(`${BASE_PATH}/beers`)
Каким образом добавить полученные "товары" в корзину? Я не смог использовать значения из state.result для последующего их добавления в state.basket.
result это просто массив из объектов. Можно получить доступ к любому товару с помощью this.state.result[индекс_объекта], но ничего с этими данными напрямую делать у меня не получается, как и с помощью setState
Если вы не понимаете как работать с данными(массивы, объекты), то вам стоит сейчас заострить свое внимание на изучении этого вопроса:
JavaScript: Структуры данных
Вам вообще нет смысла копировать товар в массив cart, туда можно складывать только id товара и количество:
class Store extends Component {
state = {
products: [],
cart:[],
};
handleAddToCartClick = (id, quantity) => {
const { cart } = this.state;
const itemIndex = cart.findIndex(item => item.id === id);
if (itemIndex !== -1) {
const newCart = [...cart];
newCart[itemIndex] = { id, quantity: cart[itemIndex].quantity + quantity };
this.setState({ cart: newCart });
} else {
this.setState(prevState => ({
cart: [
...prevState.cart,
{ id, quantity },
],
}));
}
};
const ShopItem = ({ className, item, onAddToCartClick }) => (
<div>
{/* ... */}
<button onClick={() => onAddToCartClick(item.id, 1)}>Добавить в корзину</button>
<div/>
);
Вопрос вытекает из 1го, а нормальная ли это практика добавлять в state данные, полученные из API? Если нет, то где тогда можно их хранить?
По-хорошему, в redux store. redux стоит использовать тут хотя бы потому, что те же данные о товарах понадобятся и в корзине, и на странице checkout.
Я хотел создать у каждого "товара" кнопку, которая будет менять стиль КОНКРЕТНО этого товара (это не несет никакой смысловой нагрузки, но мне хотелось это реализовать чтобы понять некоторые вещи).
У моего компонента NewsItem есть пропс styles, который устанавливает стиль в компонент.
Самый простой вариант использовать хук useState:
import React, { useState } from 'react';
const ShopItem = ({ className, item, onAddToCartClick } ) => {
const [isActive, setIsActive] = useState(false);
handleToggleActiveClick = () => {
setIsActive(!isActive);
};
return (
<div>
<ul className={`${className}${isActive ? ' active' : ''}`}>
{/* ... */}
<button onClick={handleToggleActiveClick}>Toggle active</button>
</ul>
<div/>
);
}
