Как сделать вывод элементов из корзины в React/Redux
export const initialState = {
products: [
{
id: 1,
categoryId: 1,
name: "MacBook",
price: 100000,
discount: 3,
left: 31,
image: "http://intocode.ru/d/react-project-1/images/1.jpg",
},
{
id: 2,
categoryId: 1,
name: "Galaxy",
price: 35999,
discount: 0,
left: 11,
image: "http://intocode.ru/d/react-project-1/images/2.jpg",
},
{
id: 3,
categoryId: 3,
name: "Скутер",
price: 65500,
discount: 10,
left: 0,
image: "http://intocode.ru/d/react-project-1/images/3.jpg",
},
{
id: 4,
categoryId: 2,
name: "Монитор Samsung",
price: 12000,
discount: 0,
left: 7,
image: "http://intocode.ru/d/react-project-1/images/4.jpg",
},
{
id: 5,
categoryId: 3,
name: "Респераторная маска",
price: 500,
discount: 0,
left: 24,
image: "http://intocode.ru/d/react-project-1/images/5.jpg",
},
{
id: 6,
categoryId: 2,
name: "Стиральная машина",
price: 100000,
discount: 25,
left: 0,
image: "http://intocode.ru/d/react-project-1/images/6.jpg",
},
{
id: 7,
categoryId: 2,
name: "Белый холодильник",
price: 43100,
discount: 50,
left: 18,
image: "http://intocode.ru/d/react-project-1/images/7.jpg",
},
{
id: 8,
categoryId: 1,
name: "Колонка",
price: 3000,
discount: 0,
left: 1,
image: "http://intocode.ru/d/react-project-1/images/8.jpg",
},
{
id: 9,
categoryId: 1,
name: "Наушники",
price: 1500,
discount: 15,
left: 5,
image: "http://intocode.ru/d/react-project-1/images/9.jpg",
},
],
categories: [
{
id: 1,
name: "Гаджеты и аксессуары",
},
{
id: 2,
name: "Бытовая техника",
},
{
id: 3,
name: "Прочее",
},
],
cartItems: [
{ id: 1, productId: 2, amount: 2 },
{ id: 2, productId: 9, amount: 5 },
],
};
export const shopReducer = (state = initialState, action) => {
switch (action.type) {
case "add/toCart":
return {
...state,
cartItems: [...state.cartItems, {
id: state.cartItems.length + 1,
productId: action.payload.product.id,
amount: 0
}]
}
default:
return state;
}
}
У меня есть вот такой reducer И вот с помощью вот этой чепухи я пытался вывести элементы в корзине Мне нужно выводить только те продукты id которых равен productId находящийся внутри cartItems
const Cart = () => {
const cartItem = useSelector(state => state.cartItems)
const product = useSelector(state => state.products)
const [opened, setOpened] = useState(false)
const cart = () => {
return (
<>
<div className={styles.cart}>
<div className={styles.close} onClick={() => setOpened(false)}>
закрыть
</div>
<div className={styles['head-table']}>
<div>#</div>
<div>Товар</div>
<div>Остаток</div>
<div>Кол-во</div>
</div>
{product.id === cartItem.productId &&
product.map(item => {
return (
<>
<div className={styles.section}>
<div className={styles.number}>
{cartItem.length}
<img src={item.image} alt='Картинка товара' />
</div>
<div className={styles['product-name']}>{item.name}</div>
<div className={styles.count}></div>
<div className={styles.buttons}>
<button>+</button>
<div>5</div>
<button>-</button>
<button>х</button>
</div>
</div>
</>
)
})}
<hr />
</div>
</>
)
}