Apa itu Props dan State dalam React?

Props

Props (singkatan dari "properties") adalah cara untuk mengirim data dari satu komponen ke komponen lainnya dalam React. Props adalah objek yang diteruskan dari komponen induk ke komponen anak dan bersifat read-only, artinya komponen anak tidak dapat mengubah props yang diterimanya.

State

State adalah objek yang digunakan untuk menyimpan data atau informasi tentang komponen. State dapat berubah dan memungkinkan komponen untuk merespons perubahan data secara dinamis. Berbeda dengan props, state dikelola dalam komponen itu sendiri dan dapat diubah menggunakan metode setState (untuk komponen kelas) atau hook useState (untuk komponen fungsional).

Perbedaan Utama

Feature	Props	State
Scope	Diteruskan dari komponen induk ke anak	Dikelola dalam komponen itu sendiri
Mutability	Read-only (tidak dapat diubah)	Mutable (dapat diubah)
Initialization	Diinisialisasi oleh komponen induk	Diinisialisasi dalam komponen

Contoh Props dan State

Komponen Fungsional dengan Props

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

function App() {
  return (
    <div>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
      <Welcome name="Charlie" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Penjelasan

• Welcome Component: Menerima props name dan merender pesan sapaan.

• App Component: Menggunakan komponen Welcome dengan props yang berbeda.

Komponen Kelas dengan State

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

ReactDOM.render(
  <Counter />,
  document.getElementById('root')
);

Penjelasan

• Counter Component: Menggunakan state count dan metode increment untuk memperbarui state.

• Render Method: Merender nilai count dan tombol untuk menambahkannya.

Komponen Fungsional dengan State (Hooks)

function Counter() {
  const [count, setCount] = React.useState(0);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

ReactDOM.render(
  <Counter />,
  document.getElementById('root')
);

Penjelasan

• Counter Component: Menggunakan hook useState untuk mengelola state count.

• State Update: Menggunakan setCount untuk memperbarui state saat tombol diklik.

Sumber

• React Documentation - State and Lifecycle

• React Documentation - Components and Props

• MDN Web Docs - React components

Dengan memahami props dan state, Anda dapat mengelola data dalam aplikasi React dengan lebih baik dan membuat komponen yang dinamis serta interaktif.