CODEWITHSUNDEEP
reactjsreact-hooks
sakshinarang
sakshinarang

Reputation: 99

How to call a Parent method in Child Component using Hook (ForwardRef concept)

I tried the following code but it fails So, this is my Parent Component:

    import React from 'react'
import ChildComponent from './ChildComponent';

const ParentComponent = (props) => {

    //step 1
    // const inputRef = React.createRef();
    const buttonRef = React.useRef();
    const focusHandler = () => {
        alert("hi");
    }

    return (
        <div>
            {/* In parent, we generally pass reference to child which we dint do here, lets see if props children help here */}
            {props.children}
            <ChildComponent ref="buttonRef" />

        </div>
    )
}

export default ParentComponent;

This is my child component:

import React from 'react'

const ChildComponent = React.forwardRef((props, ref) => {
    return (
        <div>
            <button onClick={ref.focusHandler}>Focus Input</button>      
        </div>
    )
})

export default ChildComponent;

On click of the button above in child component, I wish to call Parent method. How can that be achieved? EDITED

Upvotes: 4

Views: 3588

Answers (3)

Dennis Vash
Dennis Vash

Reputation: 53884

If you wonder how to use refs in this case (even though this is not the recommended way to pass callbacks), you need to assign focusHandler key and use the ref with ref.current, refer to Components and Props docs.

const ParentComponent = () => {
  const buttonRef = React.useRef({ focusHandler: () => alert("hi") });

  return (
    <div>
      <ChildComponent ref={buttonRef} />
    </div>
  );
};

const ChildComponent = React.forwardRef((props, ref) => {
  return (
    <div>
      <button onClick={ref.current.focusHandler}>Focus Input</button>
    </div>
  );
});

Edit blissful-leaf-emm72

Upvotes: 1

ShinaBR2
ShinaBR2

Reputation: 2705

Just replace ref by focusHandler like below in parent component

<ChildComponent focusHandler={focusHandler} />

Then in ChildComponent, remove ref as well.

Upvotes: 1

Nicholas Tower
Nicholas Tower

Reputation: 85012

The reason you're getting the error is because refs in function components need to be passed using ref={buttonRef}, not ref="buttonRef". Class components have a thing they can do with string refs, but it's not recommended even there.

As for calling a function from a parent component, you don't need refs to do this. So if that was the only reason you were using a ref, you can remove the ref. Instead, pass the function as a prop:

const ParentComponent = (props) => {
    const focusHandler = () => {
        alert("hi");
    }

    return (
        <div>
            <ChildComponent focusHandler={focusHandler} />
        </div>
    )
}

const ChildComponent = (props) => {
    return (
        <div>
            <button onClick={props.focusHandler}>Focus Input</button>      
        </div>
    )
}

Upvotes: 3

Related Questions