Membuat Component React Js dengan Sebuah Data di Dalamnya

Nah pada tutorial kali ini kita akan membuatnya sebagai component yang dapat digunakan berkali-kali semau mau kita.  

Pertama Ubah File LandingPage.js kita menjadi dibawah ini :  

import React, { Component } from "react";
import Header from "../parts/Header";
import Card from "../parts/Cards";
import { Button, ListGroup } from "react-bootstrap";
import axios from "axios";
export default class LandingPages extends Component {
  state = {
    data: [],
  };

  componentDidMount() {
    axios
      .get(
        `https://api.themoviedb.org/3/movie/now_playing?api_key=cab1bfdcab9dc7c24e9132e4fb6c85f2&language=en-US&page=1`
      )
      .then((res) => {
        const data = res.data.results;
        this.setState({ data });
      });
  }
  render() {
    const movies = this.state;
    console.log(movies.data);
    return (
      <>
        <Header></Header>
        <Card data={movies.data}></Card>
      </>
    );
  }
}

 Pada baris <Card data={movies.data}> itu berarti kita mengirimkan movies.data ke dalam card dengan variabel “data”, sehingga pada file cards nanti kita akan menangkapnya sehingga tampil sesuai data yang dikirimkan.

Lalu Ubah File Cards.js sehingga menjadi dibawah ini :

import React from "react";
import { CardImg } from "react-bootstrap";

export default function Cards({ data }) {
  console.log(data);

  return data.map((item, i) => {
    return (
      <CardImg
        key={i}
        alt="placeholder 960"
        className="img-fluid w-50"
        src={`https://image.tmdb.org/t/p/original/${item.poster_path}`}
      />
    );
  });
}

nah ingat pada baris export default function Cards({ data }) menandakan bahwa kita menerima data pada component ini , jika data belum terkirim coba console.log sehingga kita tau terdapat data yang terkirim atau tidak, selanjutnya ketika data sudah ada tinggal kita looping dan tampilkan data tersebut. Pada code diatas saya membuatnya tampak simpel sehingga membuat hanya meload url data gambarnya , anda dapat membuat cardnya semenarik mungkin jika anda mau kan sudah ada data api yang dikirimkan oleh TMDB sehingga mudah untuk menyesuaikan content cardnya.   Nah tutorial selanjutnya kita akan membuat page detail filmnya, sehingga ini akan lebih menantang karena mongkomunikasikan data antar halaman.