Sharing State dengan Lifting State

Pada modul sebelumnya sudah dipelajari bagaimana menggunakan state.

Agar state suatu component dapat digunakan oleh component lainnya, digunakan pendekatan Lifting State dengan melakukan function binding.

Misalnya, kita ingin menggunakan state dari AppContent di component AppHeader.

Untuk itu, kita lakukan Lifting State AppContent ke parent, yaitu index.js. Karena index.js adalah parent bersama dari AppContent dan AppHeader.

Setelah melakukan lifting state, maka state tersebut dapat diakses oleh component lainnya.

Buka file index.js, lalu modifikasi seperti berikut

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import AppHeader from './AppHeader';
import AppContent from './AppContent';
import AppFooter from './AppFooter';
import './index.css';

class App extends Component{
  constructor(props){
    super(props);
    this.handleUsersChange = this.handleUsersChange.bind(this);
    this.state = {users : []};
  }

  handleUsersChange(users){
    this.setState({users : users});
  }

  render(){
    const myProps = {
      caption : 'Hello react props 2',
      param2 : 'Ini param kedua'
    }

    return(
      <div className='main'>      
          <AppHeader {...myProps} users = {this.state.users} handleUsersChange = {this.handleUsersChange}/>
          <AppContent users = {this.state.users} handleUsersChange = {this.handleUsersChange}/>
          <AppFooter/>
      </div>
    );
  }
}

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

Pada index.js, kita tambahkan constructor yang akan melakukan binding function untuk menerima data state dari children component, dalam hal ini dari AppContent.

  constructor(props){
    super(props);
    this.handleUsersChange = this.handleUsersChange.bind(this);
    this.state = {users : []};
  }

  handleUsersChange(users){
    this.setState({users : users});
  }

Lalu pada component AppHeader, kita lakukan passing props yang berisi state dan function yang akan dibinding.

<AppHeader {...myProps} users = {this.state.users} handleUsersChange = {this.handleUsersChange}/>

Dan pada component AppContent, kita lakukan pasing props yang berisi fungsi yang akan dibinding.

<AppContent users = {this.state.users} handleUsersChange = {this.handleUsersChange}/>

Kemudian modifikasi file AppHeader.js

import React, {Component, Fragment} from 'react'

export default class AppHeader extends Component{
    constructor(props){
        super(props);
        this.handleUsersChange = this.handleUsersChange.bind(this);
    }

    handleUsersChange(users){
        this.props.handleUsersChange(users);
    }
    render(){
        return(
            <Fragment>
                <h1>{this.props.caption}</h1>
                <p>Jumlah users : {this.props.users.length}</p>
            </Fragment>
            
        );
    }
}

Modifikasi yang dilakukan adalah menambahkan constructor untuk binding fungsi untuk passing state data yang diterima dari parent.

    constructor(props){
        super(props);
        this.handleUsersChange = this.handleUsersChange.bind(this);
    }

    handleUsersChange(users){
        this.props.handleUsersChange(users);
    }

State data tersebut akan digunakan pada element <p>

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

Kemudian modifikasi file AppContent.js

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

export default class AppContent extends Component{

    constructor(props){
        super(props);
        this.handleUsersChange = this.handleUsersChange.bind(this);
    }

    handleUsersChange(users){
        this.props.handleUsersChange(users);
    }
    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.handleUsersChange(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.props.users.length}</p>
                <ul>
                    {this.props.users.map((c)=>(
                        <li key={c.id}>
                            <a href="#!" onClick={()=> this.clickedUser(c.id)}>{c.name}</a>
                        </li>
                    ))}
                </ul>
            </Fragment>
        );
    }
}

Sama seperti component sebelumnya, state sharing dihandle melalui constructor.

    constructor(props){
        super(props);
        this.handleUsersChange = this.handleUsersChange.bind(this);
    }

    handleUsersChange(users){
        this.props.handleUsersChange(users);
    }

Kemudian data state akan dipasing melalui fungsi handleUsersChange saat fetchData dijalankan.

this.handleUsersChange(json);

JIka kita jalankan aplikasi, maka sesuai ekspektasi, component AppHeader dapat mengakses data state dari component AppContent.

Pada awalnya proses diatas mungkin terlihat rumit, namun setelah Anda melakukannya beberapa kali, akan menjadi mudah dan paham.

Karena pada intinya adalah function binding dengan lifting state ke parent bersama terdekat.

Jadi saat Button Click Me ditekan, maka fungsi handleUsersChange pada parent akan melakukan pengaturan state.

Dan data akan dipassing melalui props kesemua component children yang membutuhkan data tersebut.