How to Map Strapi API Data in React JS-CodePudding

I am trying to map the Data from a Strapi Headerless CMS API in my react application. I keep on failing. When I consoleLog I do see the data. But when I use the map function to display some out put on my return. There is no data being shown. I would need help.

export default function App() {

  const [Alldata, setAlldata] = useState([]);
  useEffect(() => {
    // GET request using fetch inside useEffect React hook
    fetch("http://localhost:1337/api/rows/")
      .then((response) => response.json())
      .then((json) => setAlldata(json));
    // empty dependency array means this effect will only run once (like componentDidMount in classes)
  }, []);

  console.log(Alldata);


  return (
    <div>{Alldata.map( data => 
      <p >{Alldata.Alldata.data.attributes.Country}</p>
      )}
      
      </div>
  )
}

This is what my API data looks like. I am able to see this data from postman and it is what I want to map and display all the items as a list.

{
    "data": [
        {
            "id": 1,
            "attributes": {
                "Description": "Hello Stu",
                "Vendor": "Sony Play Station",
                "VendorId": 20,
                "FaceValue": 50,
                "DefaultCost": 50,
                "ProductCode": 317,
                "Name": 50,
                "ProductCodeAlt": "FLASH-317",
                "ProductTypeEnum": "Wallet Top Up",
                "ProductStatusEnum": "Active",
                "CountryId": 179,
                "Country": "South Africa",
                "CountryAlpha2Code": "27",
                "Logo": "https://prod.za.flashcontentmanager.flash-infra.cloud/image/i955.png",
                "createdAt": "2022-05-03T12:08:43.718Z",
                "updatedAt": "2022-05-04T09:55:47.328Z",
                "publishedAt": "2022-05-03T12:08:47.100Z"
            }
        },
        {
            "id": 2,
            "attributes": {
                "Description": "R1 - R2500 1Voucher Token",
                "Vendor": "1 Voucher",
                "VendorId": 9,
                "FaceValue": 0,
                "DefaultCost": 0,
                "ProductCode": 311,
                "Name": null,
                "ProductCodeAlt": "FLASH-311",
                "ProductTypeEnum": "Token",
                "ProductStatusEnum": "Active",
                "CountryId": 179,
                "Country": "South Africa",
                "CountryAlpha2Code": "27",
                "Logo": "https://prod.za.flashcontentmanager.flash-infra.cloud/image/i910.png",
                "createdAt": "2022-05-03T12:29:58.102Z",
                "updatedAt": "2022-05-03T12:30:00.609Z",
                "publishedAt": "2022-05-03T12:30:00.607Z"
            }
        },
        {
            "id": 3,
            "attributes": {
                "Description": "Refund 1Voucher Token",
                "Vendor": "1 Voucher",
                "VendorId": 9,
                "FaceValue": 0,
                "DefaultCost": 0,
                "ProductCode": 392,
                "Name": null,
                "ProductCodeAlt": "FLASH-392",
                "ProductTypeEnum": "Token",
                "ProductStatusEnum": "Active",
                "CountryId": 179,
                "Country": "South Africa",
                "CountryAlpha2Code": "27",
                "Logo": "https://prod.za.flashcontentmanager.flash-infra.cloud/image/i910.png",
                "createdAt": "2022-05-03T12:33:12.421Z",
                "updatedAt": "2022-05-03T12:33:14.089Z",
                "publishedAt": "2022-05-03T12:33:14.087Z"
            }
        }
    ],
    "meta": {
        "pagination": {
            "page": 1,
            "pageSize": 25,
            "pageCount": 1,
            "total": 3
        }
    }
}

CodePudding user response：

The AllData state will be an object with a data property that is the array, and then each element has the attributes.Country property.

Example:

export default function App() {
  const [Alldata, setAlldata] = useState({}); // <-- object

  useEffect(() => {
    // GET request using fetch inside useEffect React hook
    fetch("http://localhost:1337/api/rows/")
      .then((response) => response.json())
      .then((json) => setAlldata(json));
  }, []);

  console.log(Alldata);

  return (
    <div>
      {Alldata.data?.map(data => // <-- map Alldata.data, use a null check
        <p>{data.attributes.Country}</p>
      )}
    </div>
  );
}

Suggestion if you want to keep the Alldata state an array.

export default function App() {
  const [Alldata, setAlldata] = useState([]); // <-- array

  useEffect(() => {
    // GET request using fetch inside useEffect React hook
    fetch("http://localhost:1337/api/rows/")
      .then((response) => response.json())
      .then(({ data }) => setAlldata(data)); // <-- save the data array
  }, []);

  console.log(Alldata);

  return (
    <div>
      {Alldata.map(data => // <-- map Alldata array
        <p>{data.attributes.Country}</p>
      )}
    </div>
  );
}