Как сделать вывод элементов из корзины в 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>
            </>
        )
    }

Ответы (0 шт):