Belajar React : Cara kerja Props

Facebook
Twitter
LinkedIn

React component tidak terlepas dari adanya props. Pada tutorial sebelumnya, kita telah mengenal cara kerja component dan bagaimana cara membuat kustom component untuk aplikasi React kita. Nah sekarang, kita akan belajar bagaimana mengirim props ke tiap – tiap komponen yang kita buat.

Misalnya kita punya sebuah komponen bernama ImageFeed yang berisi gambar beserta deskripsi dari gambar tersebut.





Untuk membuat ImageFeed sebanyak 3 buah, maka kita impor dan masukkan komponen tersebut sebanyak 3 kali.

// App.js
import "./App.css";
import ImageFeed from "./components/ImageFeed";

function App() {
  return (
    <div className="App">
      <ImageFeed/>
      <ImageFeed/>
      <ImageFeed/>
</div>
  );
}

export default App;

Masalahnya adalah, bagaimana jika kita ingin membuat 3 komponen yang sama dengan gambar serta deskripsi selain donat, misalnya pizza 🍕?

Pengenalan Props

Props dapat diibaratkan sebgai parameter yang dikirim ke dalam sebuah function. Sebagai contoh:

ImageFeed(props);

Sebuah fungsi dinamakan ImageFeed bisa diisi 1(satu) parameter. Ingat! fungsi ini hanya dapat diisi satu parameter. Jadi ketika ada sebuah komponen bernama ImageFeed kita mengirim props sebagai object. Bingung? Sama! 😁 tapi kira – kira begini illustrasinya

// kode ini
<ImageFeed image={"img.jpg"} description={"Donut"} />

// sama dengan:
ImageFeed({image:'img.jpg', description:'Donut'})

Ngerti ngerti? semoga ngerti 😂

Mengakses Props

Ingat konsep komponen mirip dengan function di javascript, dan props hanya berisi satu parameter berisi object. Jadi props dapat diakses dengan cara:

import React from "react";

export default function ImageFeed(props) {
  return (
    <div>
      <img src={props.image} />
      <p>{props.description}</p>
    </div>
  );
}

whoaaa gampang gak sih? Dengan menggunakan props, kita bisa menggunakan komponen ImageFeed dengan gambar dan deskripsi yang berbeda – beda! Sebagai contoh:

import "./App.css";
import ImageFeed from "./components/ImageFeed";

function App() {
  return (
    <div className="App">
      <ImageFeed
        image={
          "https://images.unsplash.com/photo-1624300162353-4638839fbfc9?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80"
        }
        description={"Donut"}
      />
      <ImageFeed
        image={
          "https://images.unsplash.com/photo-1630257956817-0734ff3846dc?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=334&q=80"
        }
        description={"Potongan Pizza"}
      />
      <ImageFeed
        image={
          "https://images.unsplash.com/photo-1630257901786-3796aa883ec6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=401&q=80"
        }
        description={"Pizza"}
      />
    </div>
  );
}

export default App;

Dann hasilnya…

penerapa props react

Baca Juga:

Muhammad Fajar Estu
Muhammad Fajar Estu
Fajar adalah seorang fullstack programmer yang sekarang bekerja sebagai .NET programmer. Memiliki pengalaman selama 3+ tahun di bidang programming web, mobile, API hingga aplikasi computer vision. Sekarang Fajar menulis artikel tutorial dan berbagi seputar dunia perkuliahan IT.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *