Trying to get data from api and map to another component in React

Question

I'm trying to map an array of movies which I get from an API.

The data is fetched successfully but when I try to map the values and display, it becomes undefined and does not show anything.

I'm new to React so any help and advice would be helpful.

const [items, setItems] = useState([]);

const getMovieData = () => {
  axios
    .get(api_url)
    .then((response) => {
      const allMovies = response.data;
      console.log(allMovies);
      setItems(allMovies);
    })
    .catch((error) => console.error(`Error: ${error}`));
};

useEffect(() => {
  getMovieData();
}, []);

return (
  <div>
    {items.map((item) => {
      <p>{item.title}</p>;
    })}
  </div>
);

The data is stored like this:

0: {
  adult: false, 
  backdrop_path: '/9eAn20y26wtB3aet7w9lHjuSgZ3.jpg', 
  id: 507086, 
  title: 'Jurassic World Dominion', 
  original_language: 'en',
  ...
}

It's normal. You need to learn about promises in Javascript. Check this developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…. I will write a full answer. — 0xRyN
– 0xRyN, Commented Jul 17, 2022 at 7:28

Rohan Büchner · Accepted Answer · 2022-11-14 12:29:08Z

3

You're not returning anything from your map

{ 
  items.map((item) => {
   // Add a return
   return <p>{item.title}</p>
  })
}

edited Nov 14, 2022 at 12:29

Rohan Büchner

5,4035 gold badges66 silver badges108 bronze badges

answered Jul 17, 2022 at 7:31

Ryan Zeelie

1,5307 silver badges13 bronze badges

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

Comments

Dorji Tshering · Accepted Answer · 2022-07-17 07:52:36Z

First, your items value is an empty array[] as you have initialized with setState([]) and your useEffect() runs only after your component is rendered which means even before you could do your data fetching, your HTML is being displayed inside which you are trying to get {item.title} where your items is an empty array currently and hence undefined. You will face this issue often as you learn along. So if you want to populate paragraph tag with item.title you should fast check if your items is an empty array or not and only after that you can do the mapping as follow and also you need to return the element from the map callback. If it takes some time to fetch the data, you can choose to display a loading indicator as well.

const [items, setItems] = useState([]);
const getMovieData = () => {
  axios.get(api_url)
    .then((response) => {
      const allMovies = response.data;
      console.log(allMovies);
      setItems(allMovies);
    }).catch(error => console.error(`Error: ${error}`));
};

useEffect(() => {
  getMovieData();
}, []);
return ( < div > {
    items.length !== 0 ? items.map((item) => {
      return <p > {
        item.title
      } < /p>
    }) : < LoadingComponent / >
  }

  <
  /div>
);

0xRyN · Accepted Answer · 2022-07-17 07:37:14Z

0

Good catch by Ryan Zeelie, I did not see it.

Another thing, since you're using promises and waiting for data to retrieve, a good practice is to check if data is present before mapping.

Something like :

return (
    <div>
         { (items.length === 0) ? <p>Loading...</p> :  items.map( (item)=>{
         <p>{item.title}</p>
         })}
    </div>
);

Basically, if the array is empty (data is not retrieved or data is empty), display a loading instead of mapping the empty array.

answered Jul 17, 2022 at 7:37

0xRyN

8324 silver badges18 bronze badges

1 Comment

Ryan Zeelie Over a year ago

Yea good point! Additionally check the data being received, incase it comes back as undefined or null then the map will run and throw errors. const allMovies = response?.data; if(allMovies) setItems(allMovies)

Collectives™ on Stack Overflow

Trying to get data from api and map to another component in React

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related