Apa Itu Props dalam React?

React adalah framework JavaScript yang populer untuk membangun antarmuka pengguna (UI) yang dinamis dan interaktif.

Setelah sebelumnya kita membahas state dalam react, sekarang kita akan membahas props.

Salah satu konsep penting dalam React adalah Props, yang merupakan singkatan dari Properties.

Props adalah cara untuk mengirimkan data dari komponen induk (parent component) ke komponen anak (child component).

Bayangkan seperti memberikan informasi dari orang tua kepada anaknya.

Contoh:

Misalnya, kita memiliki komponen Header yang menampilkan judul halaman, dan komponen Product yang menampilkan informasi produk.

• Komponen Header:

  function Header(props) {
    return (
      <h1>{props.title}</h1>
    );
  }
  

• Komponen Product:

  function Product(props) {
    return (
      <div>
        <h2>{props.name}</h2>
        <p>Harga: {props.price}</p>
      </div>
    );
  }
  

Dalam contoh di atas, Header menerima props title dan Product menerima props name dan price.

Cara Menggunakan Props:

• Menyertakan Props: Untuk menyertakan props saat memanggil komponen, gunakan sintaks seperti ini: <Header title="Website Saya" />

• Mengakses Props: Dalam komponen anak, akses props menggunakan this.props atau props (tanpa this).

Keuntungan Menggunakan Props:

• Reusable Components: Props memungkinkan kita membuat komponen yang dapat digunakan kembali dengan data yang berbeda.

• Data Flow: Props membantu dalam mengatur aliran data antar komponen, membuat kode lebih terstruktur dan mudah dipahami.

• Modularitas: Props memudahkan untuk memecah aplikasi menjadi komponen-komponen kecil dan terisolasi.

Contoh Lebih Detail:

import React from "react";
import ReactDOM from "react-dom/client";

function Header(props) {
  return (
    <h1>{props.title}</h1>
  );
}

function Product(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>Harga: {props.price}</p>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <div>
    <Header title="Toko Online" />
    <Product name="Sepeda" price="Rp 1.500.000" />
  </div>
);

Kesimpulan:

Props adalah konsep penting dalam React yang memungkinkan kita mengirimkan data dari komponen induk ke komponen anak.

Dengan menggunakan props, kita dapat membangun komponen yang reusable, mudah dipahami, dan terstruktur dengan baik.

Untuk mempelajari lebih lanjut tentang props dan konsep React lainnya, Anda dapat mengunjungi situs resmi React: https://reactjs.org/