I am trying to map over the items i am receiving from my API and are in my store this is how the data look like in the state:

{
  vessels: {
    vessels: [
      {
        id: 1,
        component_count: 3,
        inventory_item_count: 1,
        name: 'Aylah',
        imo: 'Aylah123',
        image: 'http://127.0.0.1:8000/media/vessel_image/aylah.jpg'
      },
      {
        id: 2,
        component_count: 1,
        inventory_item_count: 0,
        name: 'Sinaa',
        imo: 'sinaa123',
        image: 'http://127.0.0.1:8000/media/vessel_image/DSCF9831.jpg'
      },
      {
        id: 3,
        component_count: 0,
        inventory_item_count: 0,
        name: 'Amman',
        imo: 'amman123',
        image: 'http://127.0.0.1:8000/media/vessel_image/amman.jpg'
      },
      {
        id: 4,
        component_count: 0,
        inventory_item_count: 0,
        name: 'Queen',
        imo: 'Queen 123',
        image: 'http://127.0.0.1:8000/media/vessel_image/1.jpg'
      }
    ]
  }
}

i am just trying to use the map function but i cant seem to get it work here i am trying to print all the names of the vessels : OverviewFleet.js:

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { fetchVessels } from "../../../features/vesselSlice";
import VesselCard from "./VesselCard";
function OveriewFleet() {
  const vessels = useSelector((state) => state.vessels);
  const dispatch = useDispatch();
  useEffect(() => {
    fetchVessels()(dispatch);
  }, [dispatch]);
  return (
    <div className="fleet-overview">
      <div className="fleet-overview-container">
        <span className="fleet-overview-heading-title">Fleet overview :</span>
        <div className="fleet-overview-cards">
          {vessels.map((vessel) => ({ vessel.name }))}
        </div>
      </div>
    </div>
  );
}

export default OveriewFleet;

CodePudding user response：

Looks like you are having object inside vessels with name vessels.

try with vessels?.vessels?.map

{vessels?.vessels?.map((vessel) => ({ vessel.name }))}