Mengenal Props dan State pada React JS - Code Pelajar

Props dan State pada React JS

Props dan State Pada React


Selamat datang dan selamat berjumpa kembali dengan saya salah satu admin Code Pelajar yang lumayan sibuk di dunia Isekai. Pada kesempatan kali ini, saya akan meneruskan tutorial part pada pembahasan React JS.

Pada part2 saya sudah menjelaskan bagaimana cara membuat project dengan create-react-app (CRA) dan mengenal sekilas tentang komponen pada react js. Sekarang saya akan membahas apa itu props dan state di React JS.




Apa itu props?

Props, dari katanya yang nanggung ini aja kita sudah bisa menebak bahwa ini bisa kita katakan properti, atau kalau di react itu props. penggunaan props di ReactJS melekat pada saat membuat sebuah Komponen di React. Props ini adalah sebuah "model data" (menyimpan data). Jika masih bingung mari kita mulai simulasinya seperti ini.



import React from 'react';

class Header extends React.Component {
    render(){
        return(
            <header>
                <div>
                    <h1>{this.props.siteTitle}</h1>
                </div>
            </header>
        )
    }
}
class App extends React.Component {
    render(){
        return(
            <div>
                <Header siteTitle="Code Pelajar"  />
            </div>
        )
    }
}


Maka output yang akan dihasilkan pun seperti berikut ini:


Props dan State pada React JS

Pada gambar diatas kita akan tahu bagaimana props bekerja. Dan sebenarnya untuk data yang kita kirim pada props tidak hanya string saja, kita juga bisa mengirimkan data sebuah object maupun function. Namun pada props data akan langsung di tampilkan di screen dan outpun tidak bisa dirubah alias immutable. Maka dari itu setelah halaman kita refresh, data yang ditampilkan pada props dari komponen <Header/> akan menampilkan apa yang kita simpan pada propsnya.




Props juga bisa kita buat pada Stateless Component, yaitu dengan cara memberi sebuah parameter props pada komponennya lalu memakainya tanpa menggunakan this.



const StatelessComponent =  (props) => {
    return(
        <div>
            {props.nameOfProps}
        </div>
    )
}


Apa itu state?

Untuk definisinya tidak jauh berbeda dengan props yakni sama-sama sebuah model data untuk menyimpan data, hanya saja state ini datanya bisa kita ubah-ubah dengan operasi logika (mutable). Dalam pemakaiannya ada sedikit perbedaan dimana state harus kita definisikan datanya terlebih dahulu.



import React from 'react';

class App extends React.Component {
    state = {
        siteTitle : 'Code Pelajar'
    }

    render(){
        return(
            <div>
                <span>{this.state.siteTitle}</span>
            </div>
        )
    }
}


Maka outputnya pun akan sama seperti pada saat kita menggunakan props. kita bisa melihat pada kode diatas dimana untuk state kita mendefinisikan dalam komponen Statefull dan memanggil datanya sama halnya seperti props.




Pada kode diatas saya mendefinisikan state ke sebuah data object walaupun sebenarnya masih bisa jika kita langsung menyimpan data selain objek pada state.


Untuk state sendiri, datanya bisa kita ubah dengan sebuah method khusus dari react js yaitu setState. dengan setState kita bisa mengubah data state menjadi data dinamis dengan menuliskan method setState pada sebuah function di React.



import React from 'react';

class App extends React.Component {
    state = {
        isClicked : false
    }

    handleClickButton = () => {
        this.setState({
            isClicked : !this.state.isClicked
        },() => {
            alert("button clicked: ", this.state.isClicked);
        })
    }

    render(){
        return(
            <div>
                <button onClick={this.handleClickButton}>{ this.state.isClicked ? "ON" : "OFF"}</button>
            </div>
        )
    }
}


Catatan: Pada awalnya state hanya bisa dibuat menggunakan Statefull Component. Namun pada React versi yang terbaru (v.16++) kita bisa membuat sebuah state pada Stateless Component menggunakan React Hook.

Mengkombinasi Penggunaan state dan props di React.

Walaupun sama-sama model data, namun tidak ada yang mengatakan bahwa kita harus memakai salah satunya. Ini berarti state dan props bisa kita gunakan jika kita memerlukannya. Pada projek React Weebonime saya menggunakan props dan state yang begitu komplek, hinggi bisa saya simpulkan bahwa React itu powerfull pada penggunaan 2 model data ini. semisalnya kita ingin menampilkan data yang kita dapat dari sebuah API dengan request AJAX atau kita membuat navigasi, kita perlu menyimpan datanya ke state dan mempresentasikan hasil output datanya ke props pada Komponen yang akan kita tampilkan.



import React, {Component} from 'react';

const Header = (props) => {
    return(
        <header>
            <h1>{props.siteTitle}</h1>
        </header>
    )
}

const Navigation = (props) => {
    return(
        <nav>
            <ul>
                {props.nav.map((value, index) => {
                    return <li key={index}>{value}</li>
                })}
            </ul>
        </nav>
    )
}

class App extends Component {
    state = {
        siteTitle : "Code Pelajar",
        listNav : ["Home", "Profile", "Contact", "ProjectList"]
    }
    render(){
        return(
            <div>
                <Header siteTitle = {this.state.siteTitle}  />
                <Navigation nav={this.state.listNav} />
            </div>
        )
    }
}


Maka hasilnya akan seperti berikut ini:


Props dan State pada React JS

Itulah yang bisa saya sampaikan untuk saat ini tentang pembahasan props dan state juga kombinasi props dengan state di Komponen React. Untuk part selanjutnya mungkin saya akan mencoba membahas lebih dalam tentang state pada react juga mengolah data dinamis dengan menggunakan method setState. Selain itu kita juga akan segera berkenalan dengan Lifecycle yang ada pada React JS. Sampai juga dan tetap stay on Code Pelajar.

Table Of Content


    Contact Form

    Kirim