Props

Question 1

Apa itu Props?

Answer 1

Props adalah objek yang berisi nilai atau data yang dikirim dari komponen induk (parent) ke komponen anak (child). Props bersifat read-only atau immutable, artinya komponen anak tidak boleh mengubah props yang diterimanya. Props digunakan untuk membuat komponen yang dinamis dan dapat menerima masukan yang berbeda setiap kali digunakan

Question 2

Bagaimana Props Dikirim ke Komponen?

Answer 2

Props dikirimkan ke komponen melalui atribut di tag komponen saat komponen tersebut dipanggil. Ini mirip dengan cara atribut HTML digunakan. Data yang dikirim ini akan tersedia di komponen anak melalui props.

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// Komponen Parent
function App() {
  return <Greeting name="Alice" />;
}

Question 3

Mendeklarasikan Props di Komponen

Answer 3

rops dalam React diterima sebagai argumen pada fungsi komponen. Argumen ini biasanya dinamakan props, tetapi Anda bisa menamakannya apa saja. Anda bisa mengakses data yang dikirim melalui props dengan props.propertyName.

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

Question 4

Penggunaan Props untuk Komponen yang Dinamis

Answer 4

Props sangat berguna untuk membuat komponen yang dinamis. Anda dapat mengirim berbagai macam data, seperti string, angka, objek, fungsi, atau bahkan komponen lain sebagai props.

function UserProfile({ name, age, hobbies }) {
  return (
    <div>
      <h2>Name: {name}</h2>
      <p>Age: {age}</p>
      <p>Hobbies: {hobbies.join(', ')}</p>
    </div>
  );
}

function App() {
  return (
    <UserProfile 
      name="Bob" 
      age={30} 
      hobbies={['Reading', 'Traveling', 'Coding']} 
    />
  );
}

Question 5

Default Props

Answer 5

React memungkinkan untuk menetapkan default props pada sebuah komponen jika props tertentu tidak disediakan oleh komponen induk. Default props sangat berguna ketika Anda ingin memastikan komponen tetap memiliki nilai meskipun props tidak diberikan.

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

Greeting.defaultProps = {
  name: 'Guest',
};

function App() {
  return <Greeting />;
}

Jika komponen App tidak mengirimkan props name, maka Greeting akan menggunakan nilai default "Guest".

Question 6

Props Children

Answer 6

React juga memiliki props khusus yang disebut children. Props children adalah bagian dari komponen yang ditempatkan di antara tag pembuka dan penutup komponen, mirip dengan elemen HTML yang memiliki konten di dalamnya.

function Wrapper({ children }) {
  return <div className="wrapper">{children}</div>;
}

function App() {
  return (
    <Wrapper>
      <h1>This is a child element</h1>
    </Wrapper>
  );
}

Pada contoh ini, konten <h1> di dalam <Wrapper> dianggap sebagai props.children.</Wrapper>

Question 7

Pentingnya Props dalam React

Answer 7

Props adalah salah satu cara utama untuk mengelola alur data dalam aplikasi React. Dengan menggunakan props, Anda dapat:

1. Mengirim data dari komponen induk ke anak.
2. Membuat komponen yang dapat digunakan kembali.
3. Menjaga alur data satu arah (one-way data flow), yaitu dari parent ke child.
4. Props juga berkontribusi pada desain declarative React, di mana Anda mendefinisikan apa yang harus ditampilkan berdasarkan input atau kondisi tertentu, bukan memanipulasi tampilan secara langsung.