CODEWITHSUNDEEP
reactjsreact-nativeuse-refcreate-ref
pratteek shaurya
pratteek shaurya

Reputation: 960

passing ref from parent functional component to child class component to call a function in child class component

I have a parent functonal component:

const parentFunc = () => {
  if (ref.current) {
   ref.current.getKinList();
  }
 };

<TouchableOpacity
onPress={() => {parentFunc()}
>
  <Text>click</Text>
</TouchableOpacity>

<ChildComponent
  ref={ref}
/>

child class component:

componentDidMount = () => {
  this.ref = { current: { function2 : this.function2 } };
 };

function2 = () => {
  console.log('called from child');
 };

function2 is not getting called from parent component.

There are solutions available, but I am not able to figure out where I am going wrong.

When I consoled ref.current in parentFunc it is coming as undefined

Upvotes: 0

Views: 841

Answers (1)

Ivan Shumilin
Ivan Shumilin

Reputation: 1923

You can do something like this:

export default function App() {
  const actions = React.useRef({
    setMyAction: (f) => {
      actions.current.myAction = f;
    }
  });
  return (
    <div>
      <div onClick={() => actions.current.myAction()}>click</div>
      <ChildComponent actions={actions.current} />
    </div>
  );
}

const ChildComponent = ({ actions }) => {
  actions.setMyAction(() => {
    console.log("called from child");
  });
  return null;
};

Working example

Also keep in mind that ref is a special name, not a usual property.

Upvotes: 0

Related Questions