Tanggal :October 22, 2020

Membuat Component React Js dengan Sebuah Data di Dalamnya

Spread the love
Pada Tutorial sebelumnya kita telah membuat card difile LandingPages.js , dimana source code card terdapat didalam file tersebut. hal ini sangat merugikan karna kita tidak dapat menggunakan card lagi di halaman lainnya , jika kita ingin menggunakannya kita harus membuatnya lagi di file tersebut.
 

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.  

Share

Leave a Reply

Your email address will not be published. Required fields are marked *