how do i turn data from my api to array i cant use map function so i want to turn cart.cartItems into an array

Question

I want to use the map function on cart.cartitems but it shows an error

TypeError: cart.cartItems.map is not a function

so I want help in converting cartItems into an array.

import React, { useState, useEffect } from 'react'
import { Button, Col, Row, ListGroup, Image, Card } from 'react-bootstrap'
import { Link } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import Message from '../components/Message'
import CheckoutSteps from '../components/CheckoutSteps'



const PlaceOrderScreen = ({ history }) => {

    const cart = useSelector(state => state.cart)
    const {paymentMethod} = cart


    if (!paymentMethod) {
        history.push('/payment')
    }

    return (
        
        <div>
            <CheckoutSteps step1 step2 step3 step4 />
            <Row>
                <Col md={8}>
                    <ListGroup variant='flush'>
                        <ListGroup.Item>
                            <h2>Shipping Address</h2>

                            <p>
                                <strong>Shipping: </strong>
                                {cart.shippingAddress.address}, {cart.shippingAddress.city},
                                {' '}
                                {cart.shippingAddress.postalCode},
                                {' '}
                                {cart.shippingAddress.country}
                            </p>
                        </ListGroup.Item>

                        <ListGroup.Item>
                            <h2>Payment Method</h2>
                            <p>
                                <strong>Method: </strong>
                                {cart.paymentMethod}
                            </p>
                        </ListGroup.Item>

                        <ListGroup.Item>
                            <h2>Ordered Items</h2>
                            {cart.cartItems.length === 0 ? <Message variant='secondary'>
                                Your Cart Is Empty
                            </Message> :(
                                <ListGroup variant='flush'>
                                    {cart.cartItems.map((item, index) => (
                                        <ListGroup.Item key={index}>
                                            <Row>
                                                <Col md={2}>
                                                    <Image src={item.image} alt={item.name} fluid rounded />
                                                </Col>

                                                <Col>
                                                    <Link to={`/product/${item.product}`}>{item.name}</Link>
                                                </Col>
                                            </Row>
                                        </ListGroup.Item>
                                    ))}
                                </ListGroup>
                            )}
                        </ListGroup.Item>
                    </ListGroup>
                </Col>

                <Col md={4}>
                    eee
                </Col>
            </Row>
        </div>
    )
}

export default PlaceOrderScreen

enter image description here

I have added an image so u can see what my cartItems looks like. sorry I am new to redux and javascript and I am kinda confused

Answer 1

My guess is that you are trying to access cart while it's still undefined thats why you are getting this error maybe try to put

if(!cart) return <div> loading ... </div> 

before the if statement that checks for payment method.

Answer 2

Make cartItems array in reducer, then you can copy all data in that array using spread operator.