I'm learning react. Need to map 5 images from the tinyfac.es API in ReactJS (Function Components). Image is being fetched properly (in console) but unable to render it. If possible, please explain the mistake. Thank You So Much :D
Code:
import axios from "axios";
import React from "react";
import { useState, useEffect } from "react";
let base_url = `https://tinyfac.es/api/data?limit=50&quality=0`;
function Storyslider() {
const [Containers, setContainers] = useState([]);
useEffect(() => {
axios
.get(base_url)
.then((a) => {
console.log(a.data[0].url);
setContainers(a.data.results);
})
.catch((b) => {
console.log(Error);
});
}, []);
return (
<div>
{Containers &&
Containers.map((Contain, index) => (
<img
src={Contain.data[0].url}
alt={Contain.data[0].gender}
key={index}
/>
))}
</div>
);
}
export default Storyslider; Thank You So Much :D
There is no results key inside data object. so That's why, your data are not properly set into Containers state.
Here is the working code of yours:
import axios from "axios";
import React from "react";
import { useState, useEffect } from "react";
let base_url = `https://tinyfac.es/api/data?limit=50&quality=0`;
function Storyslider() {
const [Containers, setContainers] = useState([]);
useEffect(() => {
axios
.get(base_url)
.then((a) => {
console.log(a.data);
setContainers(a.data);
})
.catch((b) => {
console.log(Error);
});
}, []);
return (
<div>
{Containers &&
Containers.map((Contain, index) => (
<img
src={Contain?.url}
alt={Contain?.gender}
key={index}
/>
))}
</div>
);
}
export default Storyslider
And if you want to render an single image (or first image) from the array you can simply do
{Containers && <img src={Containers[0].url} alt={Containers[0].gender} />}