React Fetch Api Data To Component

I am trying to make an application from The movie data base api. I came across a small problem. I have two components. In first I use fetch and I use the map() function for the Car

Solution 1:

You need to pass the item object as a prop to the Card component like

{items.map(item => <Card key={item.id} item={item} /> )}

and then access item from within the Card component like

const Card = (props) => {
  const {item} = props;
  ...

}

Solution 2:

This code should work.

The map in the ListApp as @Aakash suggested:

 render() {
    var { isLoaded, items } = this.state;
    return (
      <div>
        {items.map(item => (<Card key={item.id} item={item} />))};
            </div>
    );
  }

An Card correctly referencing the item prop:

// Card.js
import React from 'react';

const Card = (props) => {
    const { item } = props;
    return (
        <div className="movie-container">
            <img src="https://image.tmdb.org/t/p/w185/{items.poster_path}" alt="NO PHOTO" className="movie-container__img" />
            <div className="movie-container__about">
                <span className="movie-container__percent">{item.vote_average}</span>
                <h2 className="movie-container__title">{item.original_title}</h2>
                <p className="movie-container__date">{item.release_date}</p>
                <p className="movie-container__text">{item.overview}</p>
                <a href="https://www.themoviedb.org/movie/" className="movie-container__more">MORE</a>
            </div>
        </div>
    )
}

export default Card;