Cara mengirim date state dari child ke parent atau sebaliknya di React JS

03 Nov 2023
10870

Saya sedang mengerjakan sebuah project web app dengan menggunakan React. 

Saya menemukan sebuah kendala tentang bagaimana sih cara mengirim data dari parent compoment ke child component maupun sebaliknya. Oh ya, di projek ini saya menggunakan react router, jadi antara parent dengan child akan melalui sebuah tag yaitu `Outlet`.

Saya contohkan saja dengan membuat sebuah projek React JS ya.

Setup Project 

Saya menggunakan vite sebagai node package manager.

yarn create vite

Setelah itu kalian tinggal mengikuti panduan dari vite.

Disini saya membuat sebuah project dengan nama react-demo dengan pilihan framewrok React.

Setelah selesai pergi ke folder reactjs-demo dan jalankan perintah yarn untuk menginstall depedency.

Sekarang tinggal jalankan yarn dev untuk menjalankan local server kamu ya.

Selanjutnya kita install package react-router-dom .

Oh yang akan kita fokuskan adalah penggunaan fungsi Outlet dari package react-router-dom.  <Outlet> dipakai di parent component atau layout untuk me-render child element . Lebih mudahnya kita liat saja sample codenya ya.

Kita coba liat file main.tsk

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
)

Kita coba implementasikan route-nya dulu

import React from 'react'
import ReactDOM from 'react-dom/client'
import {
  createBrowserRouter,
  RouterProvider,
  Route,
  Link,
} from "react-router-dom";
import App from './App.tsx'
import './index.css'


const router = createBrowserRouter([
  {
    path: "/",
    element: <App/>,
  },
  {
    path: "about",
    element: (<div>About</div>),
  },
]);

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
)

Lalu coba buka browser lagi dan kita akan memiliki 2 route yaitu http://localhost:5173/ dan  http://localhost:5173/about

Nah saatnya coba implementasikan <Outlet>

Implementasi Outlet

Jadi fungsi <Outlet> ini adalah agar kita bisa membuat sistem layouting, misalnya ada router / sebagai base route, kemudian kita membuat child dari router tersebut misalnya /pages atau /users atau yang lainnya.

Bagaimana cara membuatnya?

Kita buat beberapa compoment dulu.

Buat 3 file, yaitu Admin.tsx, Page.tsx, dan User.tsx

Admin.tsk


import { Link, Outlet } from "react-router-dom";

function Admin() {
    return (
        <>
            <div className="admin">
                
                <h1>This Admin Page</h1>
                
                <Link to="/page">Page </Link>
                <Link to="/user">User</Link>
                <hr></hr>
                
                <div>
                    <Outlet />
                </div>
            </div>

        </>
    )
}

export default Admin

Page.tsx

function Page() {
    return (
        <>
            <div>
                This page component
            </div>
        </>
    )
}

export default Page

User.tsx

function User() {
    return (
        <>
            <div>
                This user component
            </div>
        </>
    )
}

export default User

Lalu update file main.tsx dan ubah route nya lagi.

import React from 'react'
import ReactDOM from 'react-dom/client'

import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";
import Admin from './Admin.tsx'
import Page from './Page.tsx'
import User from './User.tsx'

import './index.css'


const router = createBrowserRouter([
  {
    path: "/",
    element: <Admin />,
    children: [
      {
        path: "page",
        element: <Page />
      },
      {
        path: "user",
        element: <User />
      },
    ],
  },
]);

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>,
)

Coba perhatikan di bagian router.

Disana kita membuat children dari route / dengan child routenya yaitu /page dan /user Jadi isi dari halaman page dan user akan di render di dalam component Admin tepatnya di dalam tag <Outlet>

Tampilannya akan seperti dibawah ini.

Nah kita sudah berhasil membuat parent & child component.

Selajutnya adalah bagaimana cara mengirim data dari parent ke childnya?

Untuk mengirimkan data via props ke child kalian bisa menggunakan context.

<Outlet context={[]} />

Kita coba edit Admin.tsx dan buat beberapa data untuk kita kirim ke child ya.

Kita buat dulu sebuah state dengan menggunakan useState di import dari React.

Bisa kalian langsung lihar di code dibawah ini:


import { Link, Outlet } from "react-router-dom";
import { useState } from "react";

function Admin() {

    const [user, setUser] = useState("user")

    return (
        <>
            <div className="admin">
                
                <h1>This Admin Page</h1>

                State user = {user}
                <hr></hr>
                
                <Link to="/page">Page </Link>
                <Link to="/user">User</Link>
                <hr></hr>
                
                <div>
                    <Outlet context={[user, setUser]} />
                </div>
            </div>

        </>
    )
}

export default Admin

Untuk mengirim data ke child component, kita akan menggunakan context di dalam <Outlet>

Nah di child, untuk menangkap data dari parent, kita akan menggunakan useOutletContext 

Contohnya bisa dilihat di file Page.tsx ya.

import { useOutletContext } from "react-router-dom";

function Page() {

    const [user, setUser] = useOutletContext();

    return (
        <>
            <div>
                This page component
                <br></br>
                State dari parent: {user}
            </div>
        </>
    )
}

export default Page

Saya akan jelaskan sedikit.

  1. Pertama kita import dulu dengan code: `import { useOutletContext } from "react-router-dom";`
    1. Lalu buat const baru sesuai dengan state yang dikirim dari context di Outlet, `const [user, setUser] = useOutletContext();`
    2. Terakhir, coba tampilan data user dari parent dengan {user}

Gampang kan? hahaha

Dan state ini reactive ya, jadi jika data di parent berubah, maka data di child juga berubah.

Saya akan contohkan lagi.


import { Link, Outlet } from "react-router-dom";
import { useState } from "react";

function Admin() {

    const [user, setUser] = useState("user")

    const updateUser = () => {
        setUser("Admin")
    }

    return (
        <>
            <div className="admin">
                
                <h1>This Admin Page</h1>

                State user = {user}
                <button onClick={updateUser}>Update State User</button>
                <hr></hr>
                
                <Link to="/page">Page </Link>
                <Link to="/user">User</Link>
                <hr></hr>
                
                <div>
                    <Outlet context={[user, setUser]} />
                </div>
            </div>

        </>
    )
}

export default Admin

Nah jika button diatas diklik akan merubah nilai state user, dan di child juga berubah.

Keren kan? harusnya ini mudah dimengerti.

Lalu kamu juga bisa merubah parent state user tadi dari child. Caranya?

Kita tambahkan sebuah action di Page.tsx

import { useOutletContext } from "react-router-dom";

function Page() {

    const [user, setUser] = useOutletContext();

    const updateUser = () => {
        setUser('User From Page')
    }

    return (
        <>
            <div>
                This page component
                <br></br>
                State dari parent: {user} 
                <button onClick={updateUser}>Update State User</button>
            </div>
        </>
    )
}

export default Page

Nah kita coba lagi ya. Tampilannya harusnya jadi seperti berikut ini:

Jadi sekarang child component bisa mengupdate state dari parent-nya. Gimana keren kan? haha

Nah itu sih cara mengirim state dari parent ke child maupun sebaliknya mengupdate data parent dari child component saat menggunakan React Router via Outlet

Semoga tutorial ini membantu ya.

Salam ngide!

Artikel Lainnya

Artikel lain yang mungkin menarik juga untuk kamu baca.

© 2024