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`.
Daftar Isi
Saya contohkan saja dengan membuat sebuah projek React JS ya.
Setup Project
Saya menggunakan vite sebagai node package manager.
yarn create viteSetelah 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 AdminUntuk 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 PageSaya akan jelaskan sedikit.
- Pertama kita import dulu dengan code: `
import { useOutletContext } from "react-router-dom";`- Lalu buat const baru sesuai dengan state yang dikirim dari context di Outlet, `
const [user, setUser] = useOutletContext();` - Terakhir, coba tampilan data user dari parent dengan
{user}
- Lalu buat const baru sesuai dengan state yang dikirim dari context di Outlet, `
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 AdminNah 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!