react component
frontend, javascript, react, reactjs

React JS – Berbagi Data dan Fungsi Antar Komponen React

Berbagi Data antar Komponen React

React Js menerapkan prinsip one-way data flow, yang sering membuat bingung bagaimana data sebuah komponen bisa dibagi pada komponen lainnya.

Kali ini untuk teman bitbagi saya ingin membagi beberapa trik bagaimana berbagi data antar komponen react.

Yang pertama adalah berbagi data antara komponen parent dengan child-nya

  1. Props
  2. Instance Methodes

Yang kedua adalah berbagi data dari komponen child ke parent-nya

  1. Callback Functions
  2. Event Bubbling

Yang ketiga antar komponen dengan parent yang sama (tetanggaan / sibling)

  1. General Parent Component

Dan yang terakhir mengenai berbagi data adalah berbagi data antar komponen yang tidak memiliki hubungan seperti yang komponen-komponen sebelumnya

  1. Observer Pattern
  2. Global Variables
  3. Context

Berbagi Fungsi antar komponen React (Reusable Component)

Agar komponen react yang teman bitbagi koding bisa digunakan kembali, maka bisa dilakukan dengan cara memisahkan antara kode pengambilan data yang akan diolah dengan kode untuk memproses data tersebut.

Berikut adalah contoh kodingan yang mungkin biasa kita lakukan

class PostList extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            posts: [],
        }
    }

    componentDidMount() {
        Posts.fetch().then(posts => {
            this.setState({ posts })
        })
    }

    render() {
        return (
            <ul>
                {this.state.posts.map(post => (
                    <li key={post.id}>
                        <h1>{post.title}</h1>
                        {post.excerpt && {post.excerpt}}
                    </li>
                ))}
            </ul>
        )
    }
}

Di sini teman bitbagi bisa lihat, kode untuk pengambilan data dengan kode untuk memproses data menjadi satu, sehingga komponen react yang seperti ini tidak bisa dipakai ulang untuk data yang lain. Misalnya untuk komponen react yang mirip seperti komponen diatas

const UserList = ({ users }) => (
    <ul>
        {users.map(user => (
            <li key={user.id}>
                <h1>{user.username}</h1>
                {user.bio && <p>{user.bio}</p>}
            </li>
        ))}
    <ul>
)

Supaya komponen react bisa digunakan lagi, kita bisa memisahkan antara data dengan proses bisnisnya sebagai berikut

const Item = ({ text, title }) => (
    <li>
        <h1>{title}</h1>
            {text && <p>{text}</p>}
    </li>
)

Item.propTypes = {
    text: React.PropTypes.string,
    title: React.PropTypes.string,
}

const List = ({ collection, textKey, titleKey }) => (
    <ul>
        {collection.map(
            item => <Item key={item.id} text={item[textKey]} title={item[titleKey]} />
        )}
    </ul>
)

List.propTypes = {
    collection: React.PropTypes.array,
    textKey: React.PropTypes.string,
    titleKey: React.PropTypes.string,
}

render() {
    return (
        <List
            collection={this.state.posts}
            textKey="excerpt"
            titleKey="title"
        />
    )
}

Dengan struktur kode seperti ini kita bisa pakai ulang komponen react tersebut misalnya sebagai berikut

const UserList = ({ users }) => (
    <List
        collection={users}
        textKey="bio"
        titleKey="username"
    />
)

Demikian pembahasan tentang berbagi data dan fungsional antar komponen react.

Yuk berbagi di bitbagi.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.