Tutorial ReactJS Part #5 ~ Memahami State Dan Props

Halo teman ngoding semuanya, semoga teman teman sehat dan sukes selalu. Kali ini kita akan membahas State dan Props pada ReactJS.

React State

Komponen React memiliki objek state bawaan. Objek state adalah tempat anda menyimpan nilai properti yang dimiliki komponen tersebut. Ketika objek state berubah, maka komponen akan merender ulang. struktur yang dapat diperbarui yang digunakan untuk memuat data atau informasi tentang komponen. Keadaan dalam suatu komponen dapat berubah dari waktu ke waktu. Perubahan state dari waktu ke waktu dapat terjadi sebagai respons terhadap tindakan pengguna atau peristiwa sistem. Sebuah komponen dengan state disebut sebagai komponen stateful. Ini adalah jantung dari komponen reaksi yang menentukan perilaku komponen dan bagaimana ia akan dirender. Mereka juga bertanggung jawab untuk membuat komponen yang dinamis dan interaktif.

Untuk mendefinisikan status, Anda harus terlebih dahulu mendeklarasikan kumpulan nilai default untuk menentukan status awal komponen. Untuk melakukannya, tambahkan konstruktor kelas yang menetapkan status awal menggunakan this.state. Properti ‘this.state’ dapat dirender di dalam metode render().

Contoh:

import React, { Component } from 'react'

export default class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      count: 0,
    }
  }

  // For Add Count
  onCount = () => {
    this.setState({ count: this.state.count + 1 })
  }

  render() {
    return (
      <div>
        <h1>Count On State</h1>
        <p>Count On Plus : {this.state.count}</p>
        <button onClick={this.onCount}>Count On Me</button>
      </div>
    )
  }
}

Output:

Contoh state dengan Hooks Component

Berikut contoh penggunaan state pada Hooks component di React, setelah di atas kita menggunakan Classes Component ini adalah contoh menggunakan hooks component:

import React, { useState } from 'react'

const App = () => {
  const [count, setCount] = useState(0)

  const onCount = () => {
    setCount(count + 1)
  }
  return (
    <div>
      <h1>Count On State</h1>
      <p>Count On Plus : {count}</p>
      <button onClick={onCount}>Count On Me</button>
    </div>
  )
}
export default App

Maka hasilnya sama dengan gambar sebelumnya, kelebihan hooks adalah kodingan lebih ringkas dan clean.

React Props

Kita lanjutkan ke pembahasan selanjutnya yaitu Props pada ReactJS. Props adalah singkatan dari “Properties.” Mereka adalah komponen hanya-baca. Ini adalah objek yang menyimpan nilai atribut tag dan bekerja mirip dengan atribut HTML. Ini memberikan cara untuk melewatkan data dari satu komponen ke komponen lainnya. Ini mirip dengan argumen fungsi. Alat peraga diteruskan ke komponen dengan cara yang sama seperti argumen yang diteruskan dalam suatu fungsi.

Nah di kesempatan ini kita akan membuat sebuah Props menggunkana Class Component dan Hooks Component pada ReactJs. Ubah file App.js menjadi seperti kode di bawah ini:
Class Component React Props

Contoh:

import React, { Component } from 'react'
 
export default class App extends Component {
  render() {
    return <User name="Teman Ngoding" />
  }
}
 
// Other Component
class User extends Component {
  render() {
    return (
      <div>
        <h1>Welcome user: {this.props.name}</h1>
      </div>
    )
  }
}

Output:

Functional Component/ Hooks Component Props

Silahkan ubah file App.js menjadi seperti kode di bawah ini:

import React from 'react'
 
function User(props) {
  return <h1>Hello, {props.name}</h1>
}
 
export default function Home() {
  return (
    <div>
      <User name="Dede" />
      <User name="Fazri" />
      <User name="Handoko" />
    </div>
  )
}

Output: