Modul 2-4 Props dan State

Halo teman-teman, selamat datang kembali di course React JS bersama Nusantech Academy 🙂 .

Pada chapter sebelumnya kita telah membahas secara detail tentang JSX, mulai dari penggunaan ekspresi, menyisipkan blok HTML, One Top Level Element, dan lain-lain. Semoga teman-teman bisa mengikuti dengan baik ya 🙂 .

Pada chapter ini, kita akan membahas dua tipe penyajian data pada React JS, yaitu Props dan State. Yukss simak terus chapter ini ya teman-teman 🙂 .

Pengertian Props

Props merupakan argumen yang di-passing dari satu komponen ke komponen lain. Cara passing props sangatlah mudah, yaitu dengan menulisnya sebagai atribut pada elemen HTML. Props digunakan untuk melakukan komunikasi data antara komponen parent dan child. Berikut contoh props.

import React from 'react';
 
function Parent() {
  return <Child name="Nusantech Academy" />
}
 
function Child(props){
  return (
    <div>
      <h1>Hello {props.name}</h1>
    </div>
  )
}
 
export default Parent;

Pada source code di atas, terdapat dua komponen yaitu Parent dan Child. Pada komponen Parent, kita memanggil komponen Child dan menambahkan atribut name atau yang disebut sebagai props. Kemudian pada komponen Child, kita menerima props dari Parent melalui parameter “props”.

Pengertian State

State merupakan tipe data pada komponen React yang bersifat privat. Artinya, data dengan tipe state hanya dapat digunakan di dalam komponen itu sendiri. Komponen yang di dalamnya terdapat state disebut stateful component. Sebaliknya, komponen yang di dalamnya tidak menggunakan state disebut stateless component. State menyimpan nilai properti dari suatu komponen. Jika state berubah maka komponen akan dirender ulang. Berikut contoh state.

import React from 'react'
 
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: "Nusantech Academy"};
  }
  render() {
    return (
      <div>
        <h1>Hello {this.state.name}</h1>
      </div>
    );
  }
}
 
export default App

Inisialisasi state biasanya dilakukan di dalam komponen “constructor” , namun teman-teman juga bisa melakukannya di luar “constructor”. Pada contoh di atas, di dalam objek state terdapat properti “name”. Kemudian di dalam “render()” kita memanggil properti “name” dengan perintah “this.state.name”. Sehingga outputnya akan seperti pada Gambar 1.1.

Mengubah Nilai Props & State

Untuk mengubah nilai state pada komponen React, kita dapat menggunakan perintah “setState”. Berikut contohnya.

import React from 'react'

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = { name: 'Nusantech Academy' }
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange() {
    this.setState({ name: 'World' })
  }

  render() {
    return (
      <div>
        <h1>
          Hello&nbsp;
          {this.state.name}
        </h1>
        <button type="button" onClick={this.handleChange}>
          Ubah State
        </button>
      </div>
    )
  }
}

export default App

Pada source code di atas, ketika tombol “Ubah state” diklik maka akan menjalankan fungsi “handleChange”. Pada fungsi “handleChange”, terdapat perintah “setState” yang berfungsi untuk mengubah nilai state.

Pada data dengan tipe props, nilai props tidak dapat diubah di dalam komponen yang menerima props atau pada contoh props di atas, yaitu komponen Child(). Cara untuk mengubah nilai props yaitu dengan mengubah nilai argumen yang berada di komponen Parent(). Berikut contohnya.

import React from 'react'

class Parent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      name: 'Nusantech Academy',
    }
    this.handleChange = this.handleChange.bind(this)
  }

  handleChange() {
    this.setState({ name: 'World' })
  }

  render() {
    return <Child name={this.state.name} changeProps={this.handleChange} />
  }
}

function Child(props) {
  return (
    <div>
      <h1>
        Hello&nbsp;
        {props.name}
      </h1>
      <button type="button" onClick={props.changeProps}>
        Ubah Props
      </button>
    </div>
  )
}

export default Parent

Pada source code di atas, kita mengirim dua props ke komponen Child, yaitu “name” dan “changeProps”. “changeProps” merupakan fungsi untuk mengubah state yang berada di komponen Parent. Fungsi “changeProps” dipanggil oleh komponen Child. Sehingga ketika state berubah, maka nilai props yang di-passing juga akan berubah.

Penutup

Pada chapter ini kita telah mempelajari Props dan State. Perbedaan yang mendasar dari keduanya adalah pada props kita tidak dapat mengubah nilainya secara langsung, sedangkan pada state kita dapat melakukan hal tersebut. State bersifat privat atau tidak dapat digunakan di komponen lain, sedangkan props dapat digunakan di komponen lain (komponen child).

Sekian teman-teman penjelasan tentang Props dan State. Semoga bermanfaat untuk teman-teman dan jangan lupa untuk terus berlatih ya. Sampai jumpa di chapter selanjutnya 🙂 . See you!

Quiz

Untuk mengasah kemampuan teman-teman terkait materi ini, kami berikan beberapa soal untuk teman-teman jawab. Quiz dapat dikerjakan disini: https://bit.ly/quizreact2-4