I am trying to access a ponent method using createRef() however i am getting TypeError: modalRef.current is null error back.

I never used refs before so if its wrong guide the way how to achieve what I am trying to do.

this is my try

const parent = () => {
  const modalRef = createRef();
  const onBtnClick = () => {
   modalRef.current.upadeState();
  }
  return(
  <div>
   <button onclick={onBtnClick}>bro</button>
    <Modal ref={modalRef} />
  </div>
 )
}

Modal

export default Modal = () => {
  const upadeState = () => {
   console.log('It works fam');
   }
  return(
  <div>
    bro we here
  </div>
 )
}

I am trying to access a ponent method using createRef() however i am getting TypeError: modalRef.current is null error back.

I never used refs before so if its wrong guide the way how to achieve what I am trying to do.

this is my try

const parent = () => {
  const modalRef = createRef();
  const onBtnClick = () => {
   modalRef.current.upadeState();
  }
  return(
  <div>
   <button onclick={onBtnClick}>bro</button>
    <Modal ref={modalRef} />
  </div>
 )
}

Modal

export default Modal = () => {
  const upadeState = () => {
   console.log('It works fam');
   }
  return(
  <div>
    bro we here
  </div>
 )
}

• javascript
• reactjs
• react-hooks

• Have you tried to replace createRef() with useRef() ? – The KNVB Commented Oct 26, 2021 at 9:20
• check the accepted answer fam @TheKNVB – bihire boris Commented Oct 26, 2021 at 9:42

1 Answer 1

For calling Child Component method from parent ponent in hooks we are using React.forwardRef and React.useImperativeHandle hooks from React.

Here is an example to call the child method.

Child.js

import React from "react";
const { forwardRef, useState, useImperativeHandle } = React;

// We need to wrap ponent in `forwardRef` in order to gain
// access to the ref object that is assigned using the `ref` prop.
// This ref is passed as the second parameter to the function ponent.
const Child = forwardRef((props, ref) => {
  const [state, setState] = useState(0);

  const getAlert = () => {
    alert("getAlert from Child");
    setState(state => state + 1)
  };

  // The ponent instance will be extended
  // with whatever you return from the callback passed
  // as the second argument
  useImperativeHandle(ref, () => ({
    getAlert,
  }));

  return (
    <>
      <h1>Count {state}</h1>
      <button onClick={() => getAlert()}>Click Child</button>
      <br />
    </>
  );
});

Parent.js

import React from "react";
const { useRef } = React;

export const Parent = () => {
  // In order to gain access to the child ponent instance,
  // you need to assign it to a `ref`, so we call `useRef()` to get one
  const childRef = useRef();

  return (
    <div>
      <Child ref={childRef} />
      <button onClick={() => childRef.current.getAlert()}>Click Parent</button>
    </div>
  );
};

Child ponent is rendered and a ref is created using React.useRef named childRef. The button we created in the parent ponent is now used to call the child ponent function childRef.current.getAlert();