Menggunakan State Pada Aplikasi React

state, adalah object dari React yang menentukan bagaimana prilaku dan proses rendering component. Dengan menggunakan state, kita dapat membuat component yang dinamis.

Masih menggunakan file AppContent.js, misalnya kita ingin isi user list dengan element a href yang dapat diclick dan menjalankan fungsi tertentu.

Jika dengan menggunakan pendekatan modul sebelumnya, akan sangat sulit. Namun dengan pendekatan state, akan sangat mudah. Untuk lebih jelasnya, ubah code pada AppContent.js seperti berikut:

import React, {Component, Fragment} from 'react';
import Button from '@material-ui/core/Button';

export default class AppContent extends Component{
    state = {users: []};

    constructor(props){
        super(props);
        this.listRef = React.createRef();
    }

    fetchData = () =>{
        fetch('https://jsonplaceholder.typicode.com/users')
            .then((response)=> response.json())
            .then (json=>{
                // let users = document.getElementById('users-list');
                //const users = this.listRef.current;
                this.setState({users: json});
            });
    }

    clickedUser = (x) => {
        console.log('Clicked ', x);
    }
     
    render(){
        return(
            <Fragment>
                <p>Content goes here</p>
                <Button onClick={this.fetchData} variant="contained" color="primary">Click Me</Button>
                <ul>
                    {this.state.users.map((c)=>(
                        <li key={c.id}>
                            <a href="#!" onClick={()=> this.clickedUser(c.id)}>{c.name}</a>
                        </li>
                    ))}
                </ul>
            </Fragment>
        );
    }
}

Pembahasan Code

Untuk menggunakan state, pada component class, ditambahkan object state yang akan berisi variable users[]

state = {users: []};

Dimana state akan diset pada fungsi fetchData dengan mengisi nilai users dengan data json yang kita fetch dari site https://jsonplaceholder.typicode.com/users

this.setState({users: json});

Kemudian buat fungsi sederhana untuk menunjukan link pada <li> berhasil diclick. Fungsi ini hanya menulis ke console.

clickedUser = (x) => {
    console.log('Clicked ', x);
}

Kemudian pada element ul, kita lakukan maping data users kedalam element li.

<ul>
{this.state.users.map((c)=>(
    <li key={c.id}>
        <a href="#!" onClick={()=> this.clickedUser(c.id)}>{c.name}</a>
    </li>
))}
</ul>

Perhatikan pada element <li>, harus ditambahkan attribute key dan diisi dengan nilai unique. Dalam hal ini kita gunakan data id yang memang sudah disediakan unique oleh website terkait.

Jika kita jalankan, sesuai ekspektasi, user akan ditampilkan dan bila nama user diclick, log akan ditulis ke console.

Salah satu kelebihan dari state adalah, setelah diset, state dapat kita gunakan dimana saja pada class tersebut.

Contoh, kita tambahkan element <p> yang akan menampilkan total records data yang difetch.

<p>Jumlah users : {this.state.users.length}</p>

Sesuai ekspektasi, jumlah users dapat ditampilkan.

Berikut isi lengkap code pada AppContent.js.

import React, {Component, Fragment} from 'react';
import Button from '@material-ui/core/Button';

export default class AppContent extends Component{
    state = {users: []};

    constructor(props){
        super(props);
        this.listRef = React.createRef();
    }

    fetchData = () =>{
        fetch('https://jsonplaceholder.typicode.com/users')
            .then((response)=> response.json())
            .then (json=>{
                this.setState({users: json});
            });
    }

    clickedUser = (x) => {
        console.log('Clicked ', x);
    }
     
    render(){
        return(
            <Fragment>
                <p>Content goes here</p>
                <Button onClick={this.fetchData} variant="contained" color="primary">Click Me</Button>
                <p>Jumlah users : {this.state.users.length}</p>
                <ul>
                    {this.state.users.map((c)=>(
                        <li key={c.id}>
                            <a href="#!" onClick={()=> this.clickedUser(c.id)}>{c.name}</a>
                        </li>
                    ))}
                </ul>
            </Fragment>
        );
    }
}