Props Komponen di React

Dalam pelajaran sebelumnya kita menampilkan beberapa instance produk:

function App() {
	return <div>
		<Product />
		<Product />
		<Product />
	</div>;
}

Saat ini setiap pemanggilan tag produk menampilkan hal yang sama di layar. Sekarang mari kita buat setiap produk menjadi unik.

Misalnya, setiap produk harus memiliki nama dan harga. Mari kita buat agar setiap pemanggilan tag produk menampilkan produk dengan namanya sendiri dan harganya, yang diformat dalam tata letak yang kita inginkan.

Untuk melakukan ini, kita perlu melalui beberapa langkah.

Pertama, saat memanggil tag produk, kita akan menulis dua atribut dalam tag ini: atribut name dengan nama produk dan atribut cost dengan harga, seperti ini:

function App() {
	return <div>
		<Product name="product1" cost="100" />
		<Product name="product2" cost="200" />
		<Product name="product3" cost="300" />
	</div>;
}

Nama dan nilai atribut ini akan masuk ke dalam bentuk objek di parameter pertama fungsi konstruktor komponen kita Product:

function Product(props) {
	console.log(props); // objek dengan kunci name dan cost
	
	return <p>
		product
	</p>;
}

Nama parameter bisa apa saja, tetapi di React biasanya dinamai props. Sebenarnya ini bukan hanya nama parameter, tetapi konsep penting React.

Inti dari konsep ini adalah sebagai berikut: saat memanggil tag komponen, kita dapat menulis atribut dengan data ke dalam tag ini. Data ini akan masuk ke dalam props komponen. Kemudian komponen dapat menggunakan data ini, misalnya, untuk membuat tata letak yang diperlukan.

Mari kita lakukan ini:

function Product(props) {
	return <p>
		name: <span>{props.name}</span>,
		cost: <span>{props.cost}</span>
	</p>;
}

Lebih mudah dan lebih umum untuk tidak menggunakan objek props secara langsung, tetapi langsung melakukan destructuring props tepat di parameter fungsi:

function Product({ name, cost }) {
	return <p>
		name: <span>{name}</span>,
		cost: <span>{cost}</span>
	</p>;
}

Buatlah komponen Employee yang menampilkan data karyawan di layar. Misalkan data tersebut adalah nama belakang, nama depan, patronimik, dan gaji. Format data ini dalam tata letak yang Anda inginkan. Tampilkan tiga karyawan dengan data yang berbeda di dalam komponen App.