Component & Props

Component merupakan bagian terkecil dari sebuah aplikasi react. Jika aplikasi itu adalah sebuah mobil, maka component itu adalah ban, pintu, jendela, bagasi, blok mesin, dan lain sebagainya.

Lalu bagaimana cara membuat sebuah component?

Membuat component bisa dilakukan dengan menggunakan arrow function

import React from 'react';

const Greetings = () => {
  return (
    <h1 className="text-4xl font-extrabold">
      Hallo User, selamat pagi
    </h1>
  );
};

export default Greetings;

Selamat, kamu baru saja membuat component pertamamu!

Selanjutnya, bagaimana menggunakan component yang telah kita buat? Perhatikan source code dibawah, kita akan menggunakan component Greetings di dalam component App.

import React from 'react';
import Greetings from './Greetings';

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

export default App;

Jika kalian lihat browser harusnya akan terlihat seperti gambar dibawah

Seperti yg bisa kalian lihat, saat ini tampilan di browser hanya statik “Halo user, selamat pagi”. Bagaimana cara kita mengganti “user” dengan text lainnya misalnya ganti pakai nama kalian dan dinamis? Disinilah peran props untuk passing data dari parent component ke child component. untuk menggunakan props, kita akan memodifikasi component greetings seperti dibawah ini

import React from 'react';

const Greetings = (props) => {
  //component greetings menerima props
  return (
    <h1 className="text-4xl font-extrabold">
      Hallo {props.name}, selamat pagi
    </h1>
  );
};

export default Greetings;

untuk menampilkan isi dari props, kita menggunakan kurung kurawal. Setelah component Greeting menerima props, lalu siapa yg mengirimkannya? jawabannya adalah parent component, dimana parent component saat ini adalah component App. kita modifikasi dulu component App agar mengirimkan props ke component greetings seperti code dibawah

import React from 'react';
import Greetings from './Greetings';

function App() {
  return (
    <div>
      <Greetings name="Nyo" />
    </div>
  );
}

export default App;

Component App mengirimkan props dengan nama “name” ke Component Greetings. Begitulah cara mengirimkan dan menerima props.

Default Props

Jika saya tidak mengirimkan Props name apa yang terjadi? mari kita coba menambahkan component greeting lainnya di dalam App.js. Lihat code dibawah

import React from 'react';
import Greetings from './Greetings';

function App() {
  return (
    <div>
      <Greetings name="Nyo" />
      <Greetings />
    </div>
  );
}

export default App;

Seperti yang kalian lihat pada component Greetings pertama berisikan isi dari props name, sedangkan pada component Greetings kedua tidak ada props name. Bagaimana caranya agar props name memiliki nilai default? Kita akan menggunakan object destructuring, lihat code dibawah

import React from 'react';

const Greetings = ({ name = 'User' }) => {
  //component greetings menerima props
  return (
    <h1 className="text-4xl font-extrabold">
      Hallo {name}, selamat pagi
    </h1>
  );
};

export default Greetings;

Jika kita lihat di browser, ketika props.name tidak di definisikan maka akan diisi oleh default valuenya yaitu “user”.