React Uncaught TypeError: myarray.map is not a function-CodePudding

I keep getting this error - Uncaught TypeError: itemList.map is not a function I was under the impression itemList was just supposed to be an array? There is an array being returned in console log for itemList.

The following code is just a popup modal that pulls in data from a users shopping cart.

function Example(props) {
  const [show, setShow] = useState(false);
  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);
  const [itemList, setItemList] = useState('');
  const url = wordpressurl   "checkout/";

  useEffect(() => {
    async function getItems() {
      const value = await localforage.getItem('cart_key');
      await CoCart.get("cart?cart_key="   value).then((response) => {
        setItemList(response.data.items);
      })
    }
    console.info(itemList);
    if (!itemList) {
      getItems();
    }
  });

  return (
    <>
      <div onClick={handleShow} className='cartlable'>Cart</div><div id="cartcount"><div className="cartcount">0</div></div>
      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton className="me-2">
          <Modal.Title>Your Cart</Modal.Title>
        </Modal.Header>
        <Modal.Body id="cartlist">
          <div className="container-fluid">
            <div className="row">
              <div className="col-8 text-start"><h5>ITEM</h5></div>
              <div className="col-1 text-center"><h5>QTY</h5></div>
              <div className="col-2 text-end"><h5>SUBTOTAL</h5></div>
              <div className="col-1 text-end pe-2"></div>
            </div>

            {itemList.map((cartitem) =>
              <div className="row align-middle cartitemrows">
                <div className="col-1 text-start"><img src={cartitem.featured_image} className="cartimage" alt="" />{cartitem}</div>
              </div>
            )}

            <div className="row pt-3"><div className="col-11 text-end"><h5>TOTAL : <span id="carttotal"></span></h5></div></div>
            <form id="form-id" action={url} method="get" encType="multipart/form-data">
              <input type="hidden" name="cocart-load-cart" />
              <button id="your-id">Checkout</button>
            </form>
          </div>
        </Modal.Body>
        <Modal.Footer>
        </Modal.Footer>
      </Modal>
    </>
  );
}

Does anyone know where I'm going wrong? Thanks

Btw this is what shows up in console if I declare the useState as a string instead of an array like so const [itemList, setItemList] = useState([]); -

(2) [{…}, {…}]
0: {item_key: '698d51a19d8a121ce581499d7b701668', id: 111, name: 'Cuff Beanie', title: 'Cuff Beanie', price: '3000', …}
1: {item_key: '7ce9004ae3ad190443d43d7f81241060', id: 107, name: 'Womans T-shirt - MED Womens', title: 'Womans T-shirt', price: '6000', …}
length: 2
[[Prototype]]: Array(0)

CodePudding user response：

You're setting the default state of your list to an empty string.

Use

 const [itemList, setItemList] = useState([]);

to set the state to an empty array.

String objects do not have a map function.

Array objects(even empty ones) do have the map function

Also make sure that your response from the server is an array

CodePudding user response：

In your code you are defining the value of const [itemList, setItemList] = useState(''); as an empty string and map is an array method so insted of an empty string you can use an empty array.

const [itemList, setItemList] = useState([]);