I am trying to display a list of facts from this cat fact API https://catfact.ninja/facts?limit=15.
I have fetch the data and see the facts, 0-14, displayed in console. I created a map() to iterate through the array but only the first fact will display on the list. Thank you for your help!
import React, { useState, useEffect } from 'react';
const url = 'https://catfact.ninja/facts?limit=15';
const Index = () => {
const [factList, setFactList] = useState([]);
useEffect(() => {
getList()
},[]);
const getList = () => {
fetch(url)
.then((res) => res.json())
.then((list) => {
console.log('List:', list);
const [factList] = list.data
setFactList([factList])
})
.catch((err) => {
console.log('List ERROR ', err);
})
}
return (
<div className='App'>
<h1>FACT LIST</h1>
<ul>
{factList.map((item, index) =>
<li key={index}> {item.fact} </li>
)}
</ul>
</div>
)
}
export default IndexChange your fetch function to this:
const getList = () => {
fetch(url)
.then((res) => res.json())
.then((list) => {
setFactList(list.data);
})
.catch((err) => {
console.log("List ERROR ", err);
});
};
const [factList] = list.data; causes that only first element of the array is assigned to the factList. Read more about destructuring in JS.