0
297
ViewsApi data not rendering - react
I'm trying to render API data but for some reason, I'm unable to do it.
const [ data, setData ] = useState([])
const fetchData = () => {
return (
fetch('https://mocki.io/v1/b9c63035-97c5-40a0-b45c-2abdf5261bdf')
.then(response => response.json())
.then(data => setData(data))
.catch(error => {
console.log('Error fetching and parsing data', error)
})
)
}
useEffect(() => {
fetchData()
}, []);
console.log('API DATA', data)
I'm getting the response back but I'm not sure why its not able to loop through. I guess its because the data is in JSON format?
return (
{
data.length > 0 && data.map((item, index) => {
<div key={index}>{item.title}</div>
})
}
)
·
Juan Pablo Isaza
2 answers
Answer question0
You aren't returning anything after mapping through the array, update your return statement as:
return (
<>
{data.length > 0 &&
data.map((item, index) => {
return <div key={index}>{item.title}</div>;
})}
</>
);
or
return (
<>
{data.length > 0 &&
data.map((item, index) => <div key={index}>{item.title}</div>)}
</>
);
Also, JSX expressions should have only one parent element.
Ensure wrapping the return in a fragment, i.e, <>
·
Juan Pablo Isaza
Report
0
I prefer axios and useRef for API
const [myData, setMyData, myDataRef] = useStateRef([]);
const getData = () => {
axios
.get("https://mocki.io/v1/b9c63035-97c5-40a0-b45c-2abdf5261bdf")
.then((res) => {
let data = res.data;
console.log(data);
setMyData(data);
});
};
useEffect(() => {
getData();
}, []);
<div>
{myDataRef.current.length > 0 &&
myDataRef.current.map((item, index) => {
return <div key={index}>{item.title}</div>;
})}
</div>
·
Juan Pablo Isaza
Report
Answer question