[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"blog-cats-ngidenet":3,"blog-detail-ngidenet-cara-mengirim-date-state-dari-child-ke-parent-atau-sebaliknya-di-react-js":20},{"items":4},[5,9,13,17],{"name":6,"slug":7,"count":8},"Digital Marketing","digital-marketing",41,{"name":10,"slug":11,"count":12},"Programming","programming",56,{"name":14,"slug":15,"count":16},"Tips","tips",75,{"name":18,"slug":19,"count":8},"Web Development","web-development",{"id":21,"slug":22,"title":23,"short_text":24,"excerpt":24,"cover":25,"cover_image":25,"cover_alt_text":25,"category":18,"tags":26,"published_at":27,"created_at":28,"full_text":29,"meta_title":25,"meta_description":30,"faqs":31,"images":32,"views_count":33},502,"cara-mengirim-date-state-dari-child-ke-parent-atau-sebaliknya-di-react-js","Cara mengirim date state dari child ke parent atau sebaliknya di React JS","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 sebalikn",null,[],"2023-12-07T16:00:00Z","2026-07-14T04:39:44.798112Z","\u003Cp>Saya sedang mengerjakan sebuah project web app dengan menggunakan React. \u003C\u002Fp>\u003Cp>Saya menemukan sebuah kendala tentang bagaimana sih cara mengirim data dari parent \u003Ci>compoment\u003C\u002Fi> ke \u003Ci>child component\u003C\u002Fi> maupun sebaliknya. Oh ya, di projek ini saya menggunakan react router, jadi antara parent dengan child akan melalui sebuah tag yaitu `Outlet`.\u003C\u002Fp>\u003Cp>\u003Ch3>Daftar Isi\u003C\u002Fh3> \u003Cul>\n\u003Cli>\nSetup Project \n\u003C\u002Fli>\n\u003Cli>\nImplementasi Outlet\n\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Saya contohkan saja dengan membuat sebuah projek React JS ya.\u003C\u002Fp>\u003Ch3>Setup Project \u003C\u002Fh3>\u003Cp>\u003Cp>Saya menggunakan vite sebagai \u003Ci>node package manager.\u003C\u002Fi>\u003C\u002Fp>\u003Cpre>\u003Ccode>yarn create vite\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Setelah itu kalian tinggal mengikuti panduan dari vite.\u003C\u002Fp>\u003Cp>Disini saya membuat sebuah project dengan nama \u003Cstrong>react-demo\u003C\u002Fstrong> dengan pilihan framewrok React.\u003C\u002Fp>\u003Cp>Setelah selesai pergi ke folder \u003Cstrong>reactjs-demo\u003C\u002Fstrong> dan jalankan perintah yarn untuk menginstall \u003Ci>depedency\u003C\u002Fi>.\u003C\u002Fp>\u003Cp>Sekarang tinggal jalankan \u003Ccode>yarn dev\u003C\u002Fcode> untuk menjalankan local server kamu ya.\u003C\u002Fp>\u003Cp>Selanjutnya kita install package \u003Ci>react-router-dom\u003C\u002Fi> .\u003C\u002Fp>\u003Cp>Oh yang akan kita fokuskan adalah penggunaan fungsi \u003Ccode>Outlet\u003C\u002Fcode> dari package react\u003Ci>-router-dom. \u003C\u002Fi> \u003Ccode><Outlet>\u003C\u002Fcode> dipakai di parent component atau layout untuk me-\u003Ci>render\u003C\u002Fi> \u003Ci>child element\u003C\u002Fi> . Lebih mudahnya kita liat saja sample codenya ya.\u003C\u002Fp>\u003Cp>Kita coba liat file \u003Ccode>main.tsk\u003C\u002Fcode>\u003C\u002Fp>\u003Cpre>\u003Ccode>import React from 'react'\nimport ReactDOM from 'react-dom\u002Fclient'\nimport App from '.\u002FApp.tsx'\nimport '.\u002Findex.css'\nReactDOM.createRoot(document.getElementById('root')!).render(\n  <React.StrictMode>\n    <App \u002F>\n  <\u002FReact.StrictMode>,\n)\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Kita coba implementasikan route-nya dulu\u003C\u002Fp>\u003Cpre>\u003Ccode>import React from 'react'\nimport ReactDOM from 'react-dom\u002Fclient'\nimport {\n  createBrowserRouter,\n  RouterProvider,\n  Route,\n  Link,\n} from \"react-router-dom\";\nimport App from '.\u002FApp.tsx'\nimport '.\u002Findex.css'\nconst router = createBrowserRouter([\n  {\n    path: \"\u002F\",\n    element: <App\u002F>,\n  },\n  {\n    path: \"about\",\n    element: (<div>About<\u002Fdiv>),\n  },\n]);\nReactDOM.createRoot(document.getElementById('root')!).render(\n  <React.StrictMode>\n    <RouterProvider router={router} \u002F>\n  <\u002FReact.StrictMode>,\n)\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Lalu coba buka browser lagi dan kita akan memiliki 2 route yaitu \u003Ccode>http:\u002F\u002Flocalhost:5173\u002F\u003C\u002Fcode> dan  \u003Ccode>http:\u002F\u002Flocalhost:5173\u002Fabout\u003C\u002Fcode>\u003C\u002Fp>\u003Cp>Nah saatnya coba implementasikan \u003Ccode><Outlet>\u003C\u002Fcode>\u003C\u002Fp>\u003Ch3>Implementasi Outlet\u003C\u002Fh3>\u003Cp>Jadi fungsi \u003Ccode><Outlet>\u003C\u002Fcode> ini adalah agar kita bisa membuat sistem layouting, misalnya ada router \u002F sebagai base route, kemudian kita membuat child dari router tersebut misalnya \u002Fpages atau \u002Fusers atau yang lainnya.\u003C\u002Fp>\u003Cp>Bagaimana cara membuatnya?\u003C\u002Fp>\u003Cp>Kita buat beberapa compoment dulu.\u003C\u002Fp>\u003Cp>Buat 3 file, yaitu \u003Ccode>Admin.tsx\u003C\u002Fcode>, \u003Ccode>Page.tsx\u003C\u002Fcode>, dan \u003Ccode>User.tsx\u003C\u002Fcode>\u003C\u002Fp>\u003Cp>\u003Cstrong>Admin.tsk\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode>\nimport { Link, Outlet } from \"react-router-dom\";\nfunction Admin() {\n    return (\n        <>\n            <div className=\"admin\">\n                \n                <h1>This Admin Page<\u002Fh1>\n                \n                <Link to=\"\u002Fpage\">Page <\u002FLink>\n                <Link to=\"\u002Fuser\">User<\u002FLink>\n                <hr><\u002Fhr>\n                \n                <div>\n                    <Outlet \u002F>\n                <\u002Fdiv>\n            <\u002Fdiv>\n        <\u002F>\n    )\n}\nexport default Admin\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cstrong>Page.tsx\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode>function Page() {\n    return (\n        <>\n            <div>\n                This page component\n            <\u002Fdiv>\n        <\u002F>\n    )\n}\nexport default Page\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cstrong>User.tsx\u003C\u002Fstrong>\u003C\u002Fp>\u003Cpre>\u003Ccode>function User() {\n    return (\n        <>\n            <div>\n                This user component\n            <\u002Fdiv>\n        <\u002F>\n    )\n}\nexport default User\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Lalu update file \u003Ccode>main.tsx\u003C\u002Fcode> dan ubah route nya lagi.\u003C\u002Fp>\u003Cpre>\u003Ccode>import React from 'react'\nimport ReactDOM from 'react-dom\u002Fclient'\nimport {\n  createBrowserRouter,\n  RouterProvider,\n} from \"react-router-dom\";\nimport Admin from '.\u002FAdmin.tsx'\nimport Page from '.\u002FPage.tsx'\nimport User from '.\u002FUser.tsx'\nimport '.\u002Findex.css'\nconst router = createBrowserRouter([\n  {\n    path: \"\u002F\",\n    element: <Admin \u002F>,\n    children: [\n      {\n        path: \"page\",\n        element: <Page \u002F>\n      },\n      {\n        path: \"user\",\n        element: <User \u002F>\n      },\n    ],\n  },\n]);\nReactDOM.createRoot(document.getElementById('root')!).render(\n  <React.StrictMode>\n    <RouterProvider router={router} \u002F>\n  <\u002FReact.StrictMode>,\n)\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>\u003Cstrong>Coba perhatikan di bagian router.\u003C\u002Fstrong>\u003C\u002Fp>\u003Cp>Disana kita membuat children dari route \u003Ccode>\u002F\u003C\u002Fcode> dengan child routenya yaitu \u003Ccode>\u002Fpage\u003C\u002Fcode> dan \u003Ccode>\u002Fuser\u003C\u002Fcode> Jadi isi dari halaman \u003Ccode>page\u003C\u002Fcode> dan \u003Ccode>user\u003C\u002Fcode> akan di render di dalam component \u003Ccode>Admin\u003C\u002Fcode> tepatnya di dalam tag \u003Ccode><Outlet>\u003C\u002Fcode>\u003C\u002Fp>\u003Cp>Tampilannya akan seperti dibawah ini.\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fres.cloudinary.com\u002Fdprnqhug7\u002Fimage\u002Fupload\u002Fv1699246568\u002Fguest\u002Fnbcb7q0a2ymm98bfjl9i.gif\"\u002F>\u003C\u002Ffigure>\u003Cp>Nah kita sudah berhasil membuat parent & child component.\u003C\u002Fp>\u003Cp>Selajutnya adalah bagaimana cara mengirim data dari parent ke childnya?\u003C\u002Fp>\u003Cp>Untuk mengirimkan data via props ke child kalian bisa menggunakan context.\u003C\u002Fp>\u003Cp>\u003Ccode><Outlet context={[]} \u002F>\u003C\u002Fcode>\u003C\u002Fp>\u003Cp>Kita coba edit \u003Ccode>Admin.tsx\u003C\u002Fcode> dan buat beberapa data untuk kita kirim ke child ya.\u003C\u002Fp>\u003Cp>Kita buat dulu sebuah \u003Ci>state\u003C\u002Fi> dengan menggunakan \u003Ccode>useState\u003C\u002Fcode> di import dari React.\u003C\u002Fp>\u003Cp>Bisa kalian langsung lihar di code dibawah ini:\u003C\u002Fp>\u003Cpre>\u003Ccode>\nimport { Link, Outlet } from \"react-router-dom\";\nimport { useState } from \"react\";\nfunction Admin() {\n    const [user, setUser] = useState(\"user\")\n    return (\n        <>\n            <div className=\"admin\">\n                \n                <h1>This Admin Page<\u002Fh1>\n                State user = {user}\n                <hr><\u002Fhr>\n                \n                <Link to=\"\u002Fpage\">Page <\u002FLink>\n                <Link to=\"\u002Fuser\">User<\u002FLink>\n                <hr><\u002Fhr>\n                \n                <div>\n                    <Outlet context={[user, setUser]} \u002F>\n                <\u002Fdiv>\n            <\u002Fdiv>\n        <\u002F>\n    )\n}\nexport default Admin\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Untuk mengirim data ke child component, kita akan menggunakan context di dalam \u003Ccode><Outlet>\u003C\u002Fcode>\u003C\u002Fp>\u003Cp>Nah di child, untuk menangkap data dari \u003Ci>parent\u003C\u002Fi>, kita akan menggunakan \u003Ccode>useOutletContext\u003C\u002Fcode> \u003C\u002Fp>\u003Cp>Contohnya bisa dilihat di file \u003Ccode>Page.tsx\u003C\u002Fcode> ya.\u003C\u002Fp>\u003Cpre>\u003Ccode>import { useOutletContext } from \"react-router-dom\";\nfunction Page() {\n    const [user, setUser] = useOutletContext();\n    return (\n        <>\n            <div>\n                This page component\n                <br><\u002Fbr>\n                State dari parent: {user}\n            <\u002Fdiv>\n        <\u002F>\n    )\n}\nexport default Page\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Saya akan jelaskan sedikit.\u003C\u002Fp>\u003Col>\u003Cli>Pertama kita import dulu dengan code: `\u003Ccode>import { useOutletContext } from \"react-router-dom\";`\u003C\u002Fcode>\u003Col>\u003Cli>Lalu buat const baru sesuai dengan state yang dikirim dari context di Outlet, `\u003Ccode>const [user, setUser] = useOutletContext();\u003C\u002Fcode>`\u003C\u002Fli>\u003Cli>Terakhir, coba tampilan data user dari parent dengan \u003Ccode>{user}\u003C\u002Fcode>\u003C\u002Fli>\u003C\u002Fol>\u003C\u002Fli>\u003C\u002Fol>\u003Cp>Gampang kan? hahaha\u003C\u002Fp>\u003Cp>Dan state ini reactive ya, jadi jika data di \u003Ci>parent\u003C\u002Fi> berubah, maka data di \u003Ci>child\u003C\u002Fi> juga berubah.\u003C\u002Fp>\u003Cp>Saya akan contohkan lagi.\u003C\u002Fp>\u003Cpre>\u003Ccode>\nimport { Link, Outlet } from \"react-router-dom\";\nimport { useState } from \"react\";\nfunction Admin() {\n    const [user, setUser] = useState(\"user\")\n    const updateUser = () => {\n        setUser(\"Admin\")\n    }\n    return (\n        <>\n            <div className=\"admin\">\n                \n                <h1>This Admin Page<\u002Fh1>\n                State user = {user}\n                <button onClick={updateUser}>Update State User<\u002Fbutton>\n                <hr><\u002Fhr>\n                \n                <Link to=\"\u002Fpage\">Page <\u002FLink>\n                <Link to=\"\u002Fuser\">User<\u002FLink>\n                <hr><\u002Fhr>\n                \n                <div>\n                    <Outlet context={[user, setUser]} \u002F>\n                <\u002Fdiv>\n            <\u002Fdiv>\n        <\u002F>\n    )\n}\nexport default Admin\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Nah jika button diatas diklik akan merubah nilai \u003Ci>state\u003C\u002Fi> \u003Ci>user\u003C\u002Fi>, dan di \u003Ci>child\u003C\u002Fi> juga berubah.\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fres.cloudinary.com\u002Fdprnqhug7\u002Fimage\u002Fupload\u002Fv1699250463\u002Fguest\u002Fcmpgldu06c4uxzaadq5k.gif\"\u002F>\u003C\u002Ffigure>\u003Cp>Keren kan? harusnya ini mudah dimengerti.\u003C\u002Fp>\u003Cp>Lalu kamu juga bisa merubah \u003Ci>parent state user\u003C\u002Fi> tadi dari \u003Ci>child\u003C\u002Fi>. Caranya?\u003C\u002Fp>\u003Cp>Kita tambahkan sebuah action di \u003Ccode>Page.tsx\u003C\u002Fcode>\u003C\u002Fp>\u003Cpre>\u003Ccode>import { useOutletContext } from \"react-router-dom\";\nfunction Page() {\n    const [user, setUser] = useOutletContext();\n    const updateUser = () => {\n        setUser('User From Page')\n    }\n    return (\n        <>\n            <div>\n                This page component\n                <br><\u002Fbr>\n                State dari parent: {user} \n                <button onClick={updateUser}>Update State User<\u002Fbutton>\n            <\u002Fdiv>\n        <\u002F>\n    )\n}\nexport default Page\n\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>Nah kita coba lagi ya. Tampilannya harusnya jadi seperti berikut ini:\u003C\u002Fp>\u003Cfigure>\u003Cimg src=\"https:\u002F\u002Fres.cloudinary.com\u002Fdprnqhug7\u002Fimage\u002Fupload\u002Fv1699250656\u002Fguest\u002Fnnjimtfam8bkd5niu4wz.gif\"\u002F>\u003C\u002Ffigure>\u003Cp>Jadi sekarang \u003Ci>child component\u003C\u002Fi> bisa mengupdate state dari \u003Ci>parent\u003C\u002Fi>-nya. Gimana keren kan? haha\u003C\u002Fp>\u003Cp>Nah itu sih cara mengirim \u003Ci>state\u003C\u002Fi> dari parent ke child maupun sebaliknya mengupdate data parent dari \u003Ci>child component\u003C\u002Fi> saat menggunakan React Router via \u003Ccode>Outlet\u003C\u002Fcode>\u003C\u002Fp>\u003Cp>Semoga tutorial ini membantu ya.\u003C\u002Fp>\u003Cp>Salam ngide!\u003C\u002Fp>\n\u003C\u002Fp>\u003C\u002Fp>","Saya sedang mengerjakan sebuah project web app dengan menggunakan React. Saya menemukan sebuah kendala tentang bagaimana sih cara mengirim data dari parent comp",[],[],0]