React fetch API data to component

Question

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 Card component in which I would like to display data from the API. How to connect them correctly?

https://codesandbox.io/s/p3vxqqz53q

First component for render list:

import React, { Component } from 'react';
import Card from "./Card";

class ListApp extends Component {
    constructor(props){
        super(props);
        this.state = {
            items: [],
            isLoaded: false,
        }
    };
    componentDidMount = () => {
        fetch("https://api.themoviedb.org/3/movie/popular?api_key=xxxxxxxx&page=1")
        .then(resp => resp.json())
        .then(resp => {
            this.setState({
                isLoaded: true,
                items: resp.results
            })
            console.log(this.state.items)      
    })};

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

export default ListApp;

Second component Card:

import React from 'react';

const Card = (items) => { 
        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">{items.vote_average}</span>
                    <h2 className="movie-container__title">{items.original_title}</h2>
                    <p className="movie-container__date">{items.release_date}</p>
                    <p className="movie-container__text">{items.overview}</p>
                    <a href="https://www.themoviedb.org/movie/" className="movie-container__more">MORE</a>
                </div>
            </div>
            )
}

export default Card;

Aakash Verma · Accepted Answer · 2018-12-30 20:14:54Z

2

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;
  ...

}

edited Dec 30, 2018 at 20:14

answered Dec 30, 2018 at 20:09

Aakash Verma

4,0447 gold badges37 silver badges75 bronze badges

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

1 Comment

Aldo Over a year ago

Aakash, after post my answer I saw yours, so, as I forgot the key part, I incorporated your answer to mine.

Aldo · Accepted Answer · 2018-12-30 20:28:14Z

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;

Collectives™ on Stack Overflow

React fetch API data to component

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related