{"id":109,"date":"2024-08-19T06:50:03","date_gmt":"2024-08-19T06:50:03","guid":{"rendered":"https:\/\/www.yehger.com\/?p=109"},"modified":"2024-08-19T06:52:56","modified_gmt":"2024-08-19T06:52:56","slug":"react-how-to-call-child-function","status":"publish","type":"post","link":"https:\/\/www.yehger.com\/index.php\/2024\/08\/19\/react-how-to-call-child-function\/","title":{"rendered":"React how to call child function?"},"content":{"rendered":"

Use the "useImperativeHandle"<\/h2>\n

Parent file:<\/strong><\/p>\n

import {useRef,useEffect} from 'react'\nimport RankingPopup from '@\/components\/popups\/Ranking'\n\nexport default function(){\n\n    const RankingPopupRef = useRef(null)\n\n    useEffect(()=>{\n        RankingPopupRef.current.open()\n    },[])\n    return <RankingPopup ref={RankingPopupRef} \/>\n}<\/code><\/pre>\n
Child file:<\/strong><\/p>\n
import * as React from 'react'\n\nexport default React.forwardRef(({\n    data=[],\n    self={}\n},ref)=>{\n\n    React.useImperativeHandle(ref,()=>({\n        open(){\n            console.log("called child function")\n        }\n    }))\n\n    return "child fun"\n})<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"
Use the "useImperativeHandle" Parent file: import {useRef,useEffect} from 'react' import RankingPopup from '@\/components\/popups\/Ranking' export default function(){ const RankingPopupRef = useRef(null)… Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-109","post","type-post","status-publish","format-standard","hentry","category-react-study"],"_links":{"self":[{"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/posts\/109","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/comments?post=109"}],"version-history":[{"count":1,"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/posts\/109\/revisions"}],"predecessor-version":[{"id":110,"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/posts\/109\/revisions\/110"}],"wp:attachment":[{"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/media?parent=109"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/categories?post=109"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yehger.com\/index.php\/wp-json\/wp\/v2\/tags?post=109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}