Map and Render Data from API in ReactJS (Function Components)

Question

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.

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;

Pradip Dhakal · Accepted Answer · 2021-11-15 09:10:16Z

2

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} />}

edited Nov 15, 2021 at 9:10

answered Nov 15, 2021 at 9:04

Pradip Dhakal

1,9821 gold badge15 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mila A Over a year ago

That is true! I think the author has just confused the data received and the data set to the useState Containers variable

Youssouf Oumar · Accepted Answer · 2023-09-24 15:46:32Z

Calling setContainers(a.data.results) will result to container state being undefined as there is no results key on the data you are getting back. Here is a simplified working example of your attempt:

import axios from "axios";
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) => {
        setContainers(a.data);
      })
      .catch((b) => {
        console.log(Error);
      });
  }, []);
  return (
    <div>
      {containers.map((contain, index) => (
        <img src={contain.url} alt={contain.gender} key={index} />
      ))}
    </div>
  );
}

export default Storyslider;

Collectives™ on Stack Overflow

Map and Render Data from API in ReactJS (Function Components)

2 Answers 2

1 Comment

Comments

Your Answer

Collectives™ on Stack Overflow

Map and Render Data from API in ReactJS (Function Components)

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest