Call child method from parent

Question

I have two components   Parent component Child component  I was trying to call Child s method from Parent  I tried this way but couldn t get a result  class Parent extends Component     render         return          lt Child gt           lt button onClick  Child getAlert    gt Click lt  button gt         lt  Child gt                      class Child extends Component     getAlert         alert  clicked            render         return          lt h1 ref  quot hello quot  gt Hello lt  h1 gt                Is there a way to call Child s method from Parent  Note  Child and Parent components are in two different files

User · Answer

Another way of triggering a child function from parent is to make use of the componentDidUpdate function in child Component. I pass a prop triggerChildFunc from Parent to Child, which initially is null. The value changes to a function when the button is clicked and Child notice that change in componentDidUpdate and calls its own internal function.

Since prop triggerChildFunc changes to a function, we also get a callback to the Parent. If Parent don't need to know when the function is called the value triggerChildFunc could for example change from null to true instead.

_x000D_

const { Component } = React;_x000D_
const { render } = ReactDOM;_x000D_
_x000D_
class Parent extends Component {_x000D_
  state = {_x000D_
    triggerFunc: null_x000D_
  }_x000D_
_x000D_
  render() {_x000D_
    return (_x000D_
      <div>_x000D_
        <Child triggerChildFunc={this.state.triggerFunc} />_x000D_
        <button onClick={() => {_x000D_
          this.setState({ triggerFunc: () => alert('Callback in parent')})_x000D_
        }}>Click_x000D_
        </button>_x000D_
      </div>_x000D_
    );_x000D_
  }_x000D_
}_x000D_
_x000D_
class Child extends Component {_x000D_
  componentDidUpdate(prevProps) {_x000D_
    if (this.props.triggerChildFunc !== prevProps.triggerChildFunc) {_x000D_
      this.onParentTrigger();_x000D_
    }_x000D_
  }_x000D_
_x000D_
  onParentTrigger() {_x000D_
    alert('parent triggered me');_x000D_
_x000D_
    // Let's call the passed variable from parent if it's a function_x000D_
    if (this.props.triggerChildFunc && {}.toString.call(this.props.triggerChildFunc) === '[object Function]') {_x000D_
      this.props.triggerChildFunc();_x000D_
    }_x000D_
  }_x000D_
_x000D_
  render() {_x000D_
    return (_x000D_
      <h1>Hello</h1>_x000D_
    );_x000D_
  }_x000D_
}_x000D_
_x000D_
_x000D_
render(_x000D_
  <Parent />,_x000D_
  document.getElementById('app')_x000D_
);

_x000D_

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>_x000D_
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>_x000D_
<div id='app'></div>

_x000D_

CodePen: https://codepen.io/calsal/pen/NWPxbJv?editors=1010

User · Answer

I hope I m not repeating anything from above but what about passing a callback prop that sets the function in the parent  This works and is pretty easy   Added code is between the      s  class Parent extends Component              getAlert        gt        initial value for getAlert    setGetAlertMethod    newMethod    gt        this getAlert   newMethod                 render         return          lt Child setGetAlertMethod  this setGetAlertMethod  gt           lt button onClick  this getAlert  gt Click lt  button gt         lt  Child gt                        class Child extends Component             componentDidMount         this props setGetAlertMethod this getAlert                  getAlert     gt        alert  clicked           render         return          lt h1 ref  quot hello quot  gt Hello lt  h1 gt

User · Answer

https   facebook github io react tips expose-component-functions html for more answers ref here Call methods on React children components  By looking into the refs of the  reason  component  you re breaking encapsulation and making it impossible to refactor that component without carefully examining all the places it s used  Because of this  we strongly recommend treating refs as private to a component  much like state   In general  data should be passed down the tree via props  There are a few exceptions to this  such as calling  focus   or triggering a one-time animation that doesn t really  change  the state  but any time you re exposing a method called  set   props are usually a better choice  Try to make it so that the inner input component worries about its size and appearance so that none of its ancestors do

User · Answer

You can achieve this easily in this way  Steps-   Create a boolean variable in the state in the parent class  Update this when you want to call a function  Create a prop variable and assign the boolean variable  From the child component access that variable using props and execute the method you want by having an if condition   class Child extends Component      Method     gt      --Your method body--         render          return         check whether the variable has been updated or not       if this props updateMethod           this Method                           class Parent extends Component    constructor      this state      callMethod false        render        return           update state according to your requirement      this setState           callMethod true               lt Child updateMethod  this state callMethod  gt  lt  Child gt

User · Answer

You can make Inheritance Inversion  look it up here  https   medium com  franleplant react-higher-order-components-in-depth-cf9032ee6c3e   That way you have access to instance of the component that you would be wrapping  thus you ll be able to access it s functions

User · Answer

I think that the most basic way to call methods is by setting a request on the child component  Then as soon as the child handles the request  it calls a callback method to reset the request   The reset mechanism is necessary to be able to send the same request multiple times after each other   In parent component  In the render method of the parent   const   request     this state  return   lt Child request  request  onRequestHandled    - gt resetRequest     gt      The parent needs 2 methods  to communicate with its child in 2 directions   sendRequest       const request     param   value       this setState   request        resetRequest       const request   null    this setState   request         In child component  The child updates its internal state  copying the request from the props   constructor props      super props     const   request     props    this state     request       static getDerivedStateFromProps props  state      const   request     props    if  request     state request   return   request      return null      Then finally it handles the request  and sends the reset to the parent   componentDidMount       const   request     this state       todo handle request     const   onRequestHandled     this props    if  onRequestHandled    null  onRequestHandled

User · Answer

I wasn t satisfied with any of the solutions presented here  There is actually a very simple solution that can be done using pure Javascript without relying upon some React functionality other than the basic props object - and it gives you the benefit of communicating in either direction  parent -  child  child -  parent   You need to pass an object from the parent component to the child component  This object is what I refer to as a  bi-directional reference  or biRef for short  Basically  the object contains a reference to methods in the parent that the parent wants to expose  And the child component attaches methods to the object that the parent can call  Something like this      Parent component  function MyParentComponent props        function someParentFunction              The child component can call this function           function onButtonClick               Call the function inside the child component         biRef someChildFunction                Add all the functions here that the child can call     var biRef           someParentFunction  someParentFunction          return  lt div gt          lt MyChildComponent biRef  biRef    gt          lt Button onClick  onButtonClick    gt      lt  div gt          Child component function MyChildComponent props        function someChildFunction              The parent component can call this function            function onButtonClick              Call the parent function        props biRef someParentFunction                Add all the child functions to props biRef that you want the parent       to be able to call     props biRef someChildFunction   someChildFunction      return  lt div gt          lt Button onClick  onButtonClick    gt      lt  div gt       The other advantage to this solution is that you can add a lot more functions in the parent and child while passing them from the parent to the child using only a single property   An improvement over the code above is to not add the parent and child functions directly to the biRef object but rather to sub members  Parent functions should be added to a member called  parent  while the child functions should be added to a member called  child       Parent component  function MyParentComponent props        function someParentFunction              The child component can call this function           function onButtonClick               Call the function inside the child component         biRef child someChildFunction                Add all the functions here that the child can call     var biRef           parent              someParentFunction  someParentFunction                  return  lt div gt          lt MyChildComponent biRef  biRef    gt          lt Button onClick  onButtonClick    gt      lt  div gt          Child component function MyChildComponent props        function someChildFunction              The parent component can call this function            function onButtonClick              Call the parent function        props biRef parent someParentFunction                Add all the child functions to props biRef that you want the parent       to be able to call     props biRef          child                someChildFunction  someChildFunction                   return  lt div gt          lt Button onClick  onButtonClick    gt      lt  div gt       By placing parent and child functions into separate members of the biRef object  you  ll have a clean separation between the two and easily see which ones belong to parent or child  It also helps to prevent a child component from accidentally overwriting a parent function if the same function appears in both   One last thing is that if you note  the parent component creates the biRef object with var whereas the child component accesses it through the props object  It might be tempting to not define the biRef object in the parent and access it from its parent through its own props parameter  which might be the case in a hierarchy of UI elements   This is risky because the child may think a function it is calling on the parent belongs to the parent when it might actually belong to a grandparent  There s nothing wrong with this as long as you are aware of it  Unless you have a reason for supporting some hierarchy beyond a parent child relationship  it s best to create the biRef in your parent component

User · Answer

We can use refs in another way as-  We are going to create a Parent element  it will render a  lt Child  gt  component    As you can see  the component that will be rendered  you need to add the ref attribute and provide a name for it  Then  the triggerChildAlert function  located in the parent class will access the refs property of the this context  when the triggerChildAlert function is triggered will access the child reference and it will has all the functions of the child element      class Parent extends React Component       triggerChildAlert            this refs child callChildMethod               to get child parent returned  value-            this value   this refs child callChildMethod               alert  Returned value-   this value              render             return                lt div gt                      Note that you need to give a value to the ref parameter  in this case child                     lt Child ref  child    gt                   lt button onClick  this triggerChildAlert  gt Click lt  button gt               lt  div gt                         Now  the child component  as theoretically designed previously  will look like     class Child extends React Component       callChildMethod             alert  Hello World               to return some value            return this state someValue             render             return                lt h1 gt Hello lt  h1 gt                       Here is the source code- Hope will help you

User · Answer

First off  let me express that this is generally not the way to go about things in React land  Usually what you want to do is pass down functionality to children in props  and pass up notifications from children in events  or better yet  dispatch    But if you must expose an imperative method on a child component  you can use refs  Remember this is an escape hatch and usually indicates a better design is available      Previously  refs were only supported for Class-based components     With the advent of React Hooks  that s no longer the case   Using Hooks and Function Components   gt   react 16 8    x000D   x000D  const   forwardRef  useRef  useImperativeHandle     React  x000D   x000D     We need to wrap component in  forwardRef  in order to gain x000D     access to the ref object that is assigned using the  ref  prop  x000D     This ref is passed as the second parameter to the function component  x000D  const Child   forwardRef  props  ref    gt    x000D   x000D       The component instance will be extended x000D       with whatever you return from the callback passed x000D       as the second argument x000D    useImperativeHandle ref       gt     x000D   x000D      getAlert     x000D        alert  getAlert from Child    x000D        x000D   x000D         x000D   x000D    return  lt h1 gt Hi lt  h1 gt   x000D      x000D   x000D  const Parent        gt    x000D       In order to gain access to the child component instance  x000D       you need to assign it to a  ref   so we call  useRef    to get one x000D    const childRef   useRef    x000D   x000D    return   x000D       lt div gt  x000D         lt Child ref  childRef    gt  x000D         lt button onClick       gt  childRef current getAlert    gt Click lt  button gt  x000D       lt  div gt  x000D       x000D     x000D   x000D  ReactDOM render  x000D     lt Parent   gt   x000D    document getElementById  root   x000D     x000D   lt script src  https   unpkg com react 16 umd react development js  crossorigin gt  lt  script gt  x000D   lt script src  https   unpkg com react-dom 16 umd react-dom development js  crossorigin gt  lt  script gt  x000D   x000D   lt div id  root  gt  lt  div gt  x000D   x000D   x000D    Documentation for useImperativeHandle   is here      useImperativeHandle customizes the instance value that is exposed to parent components when using ref    Using Class Components   gt   react 16 4    x000D   x000D  const   Component     React  x000D   x000D  class Parent extends Component   x000D    constructor props    x000D      super props   x000D      this child   React createRef    x000D      x000D   x000D    onClick        gt    x000D      this child current getAlert    x000D       x000D   x000D    render     x000D      return   x000D         lt div gt  x000D           lt Child ref  this child    gt  x000D           lt button onClick  this onClick  gt Click lt  button gt  x000D         lt  div gt  x000D         x000D      x000D    x000D   x000D  class Child extends Component   x000D    getAlert     x000D      alert  getAlert from Child    x000D      x000D   x000D    render     x000D      return  lt h1 gt Hello lt  h1 gt   x000D      x000D    x000D   x000D  ReactDOM render  lt Parent   gt   document getElementById  root     x000D   lt script src  https   unpkg com react 16 umd react development js  crossorigin gt  lt  script gt  x000D   lt script src  https   unpkg com react-dom 16 umd react-dom development js  crossorigin gt  lt  script gt  x000D   lt div id  root  gt  lt  div gt  x000D   x000D   x000D    Legacy API   lt   react 16 3   For historical purposes  here s the callback-based style you d use with React versions before 16 3    x000D   x000D  const   Component     React  x000D  const   render     ReactDOM  x000D   x000D  class Parent extends Component   x000D    render     x000D      return   x000D         lt div gt  x000D           lt Child ref  instance   gt    this child   instance       gt  x000D           lt button onClick       gt    this child getAlert       gt Click lt  button gt  x000D         lt  div gt  x000D         x000D      x000D    x000D   x000D  class Child extends Component   x000D    getAlert     x000D      alert  clicked    x000D      x000D   x000D    render     x000D      return   x000D         lt h1 gt Hello lt  h1 gt  x000D         x000D      x000D    x000D   x000D   x000D  render  x000D     lt Parent   gt   x000D    document getElementById  app   x000D     x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs react 15 1 0 react-dom min js  gt  lt  script gt  x000D   x000D   lt div id  app  gt  lt  div gt  x000D   x000D   x000D

User · Answer

We re happy with a custom hook we call useCounterKey   It just sets up a counterKey  or a key that counts up from zero   The function it returns resets the key  i e  increment     I believe this is the most idiomatic way in React to reset a component - just bump the key    However this hook also works in any situation where you want to send a one-time message to the client to do something   E g  we use it to focus a control in the child on a certain parent event - it just autofocuses anytime the key is updated    If more props are needed they could be set prior to resetting the key so they re available when the event happens    This method has a bit of a learning curve b c it s not as straightforward as a typical event handler  but it seems the most idiomatic way to handle this in React that we ve found  since keys already function this way    Def open to feedback on this method but it is working well      Main helper hook  export function useCounterKey       const  key  setKey    useState 0     return  key       gt  setKey prev   gt  prev   1   as const      Sample usages      Sample 1 - normal React  just reset a control by changing Key on demand function Sample1       const  inputLineCounterKey  resetInputLine    useCounterKey       return  lt  gt       lt InputLine key  inputLineCounterKey    gt       lt button onClick       gt  resetInputLine      gt     lt  gt         Second sample - anytime the counterKey is incremented  child calls focus   on the input function Sample2       const  amountFocusCounterKey  focusAmountInput    useCounterKey              call focusAmountInput in some hook or event handler as needed    return  lt WorkoutAmountInput focusCounterKey  amountFocusCounterKey    gt     function WorkoutAmountInput props      useEffect      gt        if  counterKey  gt  0             Don t focus initially       focusAmount                counterKey                   Credit to Kent Dodds for the counterKey concept

User · Answer

you can use ref to call the function of the child component from the parent Functional Component Solution in functional component  you have to use useImperativeHandle for getting ref into a child like below import React    forwardRef  useRef  useImperativeHandle   from  react   export default function ParentFunction         const childRef   useRef        return            lt div className  quot container quot  gt               lt div gt                  Parent Component              lt  div gt               lt button                 onClick       gt    childRef current showAlert                   gt              Call Function              lt  button gt               lt Child ref  childRef   gt           lt  div gt          const Child   forwardRef  props  ref    gt        useImperativeHandle          ref               gt                 showAlert                     alert  quot Child Function Called quot                                       return           lt div gt Child Component lt  div gt            Class Component Solution Child js import s from    Child css    class Child extends Component    getAlert         alert  clicked        render       return        lt h1 gt Hello lt  h1 gt             export default Child   Parent js class Parent extends Component    render       onClick         this refs child getAlert          return        lt div gt         lt Child ref  quot child quot    gt         lt button onClick  this onClick  gt Click lt  button gt       lt  div gt

User · Answer

If you are doing this simply because you want the Child to provide a re-usable trait to its parents  then you might consider doing that using render-props instead  That technique actually turns the structure upside down   The Child now wraps the parent  so I have renamed it to AlertTrait below   I kept the name Parent for continuity  although it is not really a parent now     Use it like this      lt AlertTrait renderComponent  Parent   gt    class AlertTrait extends Component        You will need to bind this function  if it uses  this    doAlert         alert  clicked          render         return this props renderComponent   doAlert  this doAlert            class Parent extends Component     render         return          lt button onClick  this props doAlert  gt Click lt  button gt                In this case  the AlertTrait provides one or more traits which it passes down as props to whatever component it was given in its renderComponent prop  The Parent receives doAlert as a prop  and can call it when needed   For clarity  I called the prop renderComponent in the above example   But in the React docs linked above  they just call it render   The Trait component can render stuff surrounding the Parent  in its render function  but it does not render anything inside the parent   Actually it could render things inside the Parent  if it passed another prop  e g  renderChild  to the parent  which the parent could then use during its render method  This is somewhat different from what the OP asked for  but some people might end up here  like we did  because they wanted to create a reusable trait  and thought that a child component was a good way to do that

User · Answer

I m using useEffect hook to overcome the headache of doing all this so now I pass a variable down to child like this    lt ParentComponent gt    lt ChildComponent arbitrary  value    gt   lt  ParentComponent gt  useEffect      gt  callTheFunctionToBeCalled value     value

User · Answer

Alternative method with useEffect  Parent  const  refresh  doRefresh    useState 0    lt Button onClick       gt  doRefresh prev   gt  prev   1     gt   lt Children refresh  refresh    gt   Children  useEffect      gt        performRefresh      children function of interest       props refresh

User · Answer

You can apply that logic very easily using your child component as a react custom hook  How to implement it   Your child returns a function   Your child returns a JSON   function  HTML  or other values  as the example    In the example doesn t make sense to apply this logic but it is easy to see   x000D   x000D  const  useState    React     Parent const Parent        gt        custome hook   const child   useChild       return        lt div gt         child display                   lt button onClick  child alert  gt          Parent call child        lt  button gt         child btn       lt  div gt             Child const useChild        gt       const  clickCount  setClick    React useState 0            child button       const btn          lt button       onClick       gt            setClick clickCount   1                 gt        Click me      lt  button gt          return       btn  btn        function called from parent      alert       gt          alert  You clicked     clickCount     times               display   lt h1 gt  clickCount  lt  h1 gt           const rootElement   document getElementById  root    ReactDOM render  lt Parent   gt   rootElement   x000D   lt script src  https   cdnjs cloudflare com ajax libs react 16 8 4 umd react production min js  gt  lt  script gt   lt script src  https   cdnjs cloudflare com ajax libs react-dom 16 8 4 umd react-dom production min js  gt  lt  script gt   lt div id  root  gt  lt  div gt  x000D   x000D   x000D

User · Answer

Here s a bug  to look out for   I concur with rossipedia s solution using forwardRef  useRef  useImperativeHandle  There s some misinformation online that says refs can only be created from React Class components  but you can indeed use Function Components if you use the aforementioned hooks above   A note  the hooks only worked for me after I changed the file to not use withRouter   when exporting the component  I e  a change from   export default withRouter TableConfig     to instead be  export default TableConfig    In hindsight the withRouter   is not needed for such a component anyway  but usually it doesn t hurt anything having it in  My use case is that I created a component to create a Table to handle the viewing and editing of config values  and I wanted to be able to tell this Child component to reset it s state values whenever the Parent form s Reset button was hit   UseRef   wouldn t properly get the ref or ref current  kept on getting null  until I removed withRouter   from the file containing my child component TableConfig

User · Answer

You can use another pattern here   class Parent extends Component    render       return        lt div gt         lt Child setClick  click   gt  this clickChild   click   gt         lt button onClick       gt  this clickChild    gt Click lt  button gt       lt  div gt             class Child extends Component    constructor props        super props       this getAlert   this getAlert bind this       componentDidMount         this props setClick this getAlert       getAlert         alert  clicked        render       return        lt h1 ref  hello  gt Hello lt  h1 gt              What it does is to set the parent s clickChild method when child is mounted  In this way when you click the button in parent it will call clickChild which calls child s getAlert   This also works if your child is wrapped with connect   so you don t need the getWrappedInstance   hack   Note you can t use onClick  this clickChild  in parent because when parent is rendered child is not mounted so this clickChild is not assigned yet  Using onClick       gt  this clickChild    is fine because when you click the button this clickChild should already be assigned

User · Answer

Here my demo  https   stackblitz com edit react-dgz1ee file styles css  I am using useEffect to call the children component s methods  I have tried with Proxy and Setter Getter but sor far useEffect seems to be the more convenient way to call a child method from parent  To use Proxy and Setter Getter it seems there is some subtlety to overcome first  because the element firstly rendered is an objectLike s element through the ref current return   gt   lt div  gt  s specificity   Concerning useEffect  you can also leverage on this approach to set the parent s state depending on what you want to do with the children    In the demo s link I have provided  you will find my full ReactJS  code with my draftwork inside s so you can appreciate the workflow of my solution   Here I am providing you my ReactJS  snippet with the relevant code only     import React      Component    createRef    forwardRef    useState    useEffect   from  react               Child component    I am defining here a forwardRef s element to get the Child s methods from the parent    through the ref s element  let Child   forwardRef  props  ref    gt         I am fetching the parent s method here      that allows me to connect the parent and the child s components   let   validateChildren     props       I am initializing the state of the children      good if we can even leverage on the functional children s state   let initialState         one   hello world       two       gt          console log  I am accessing child method from parent              return  child method achieve                   useState initialization   const  componentState  setComponentState    useState initialState        useEffect will allow me to communicate with the parent      through a lifecycle data flow   useEffect      gt        ref current     componentState        validateChildren ref current componentState two                                Parent component class App extends Component        initialize the ref inside the constructor element   constructor props        super props       this childRef   createRef              I am implementing a parent s method      in child useEffect s method   validateChildren   childrenMethod   gt           access children method from parent     childrenMethod           or signaling children is ready     console log  children active                render           return                              I am referencing the children                also I am implementing the parent logic connector s function                in the child  here   gt  this validateChildren s function                        lt Child ref  this childRef  validateChildren  this validateChildren    gt           lt  div gt

[javascript] Call child method from parent

Examples related to javascript

Examples related to reactjs