I am having a parent and child ponent the looks like this

export function Parent(){
  function handleClick(){
     // Here I need to access Child ponents ref, that may be taken to this function as a parameter
  }

  return(
    <>
      <h1> Parent ponent here </h1>
      <Child/>
      <button onClick={handleClick}>Get Ref</button> 
    </>
  )
}


export function Child(){
  const childRef = useRef("test")
  return(
    <h1> Child Component</h1>
  )
}

How do I get the ref that is defined inside the child ponent to be accessed inside the parent based on the button click in the parent ponent?

I am having a parent and child ponent the looks like this

export function Parent(){
  function handleClick(){
     // Here I need to access Child ponents ref, that may be taken to this function as a parameter
  }

  return(
    <>
      <h1> Parent ponent here </h1>
      <Child/>
      <button onClick={handleClick}>Get Ref</button> 
    </>
  )
}


export function Child(){
  const childRef = useRef("test")
  return(
    <h1> Child Component</h1>
  )
}

How do I get the ref that is defined inside the child ponent to be accessed inside the parent based on the button click in the parent ponent?

• javascript
• reactjs
• react-hooks
• use-effect
• use-ref

• Set the useRef hook in your parent ponent in the <Child> tag – SimonDX Commented Mar 8, 2022 at 15:24

2 Answers 2

You can use React.forwardRef to get a hold of the child ref in your parent ponent.

export function Parent(){
  const childRef = useRef();

  function handleClick(){
     console.log(childRef.current);
  }

  return(
    <>
      <h1> Parent ponent here </h1>
      <Child ref={childRef} />
      <button onClick={handleClick}>Get Ref</button> 
    </>
  )
}


export default React.forwardRef((props, ref) => {
  return(
    <h1 ref={ref}>Child Component</h1>
  )
});

Alternatively, if you don't like to use React.forwardRef, you can also just pass the ref as prop. But you can't name it ref in this case.

export function Parent(){
  const childRef = useRef();

  function handleClick(){
     console.log(childRef.current);
  }

  return(
    <>
      <h1> Parent ponent here </h1>
      <Child innerRef={childRef} />
      <button onClick={handleClick}>Get Ref</button> 
    </>
  )
}


export default function Child({ innerRef }) {
  return(
    <h1 ref={innerRef}>Child Component</h1>
  )
});

Could you please try that. I passed function as props to child and set ref there when child rendered;

export function Parent(){
  function handleClick(value){
     var childRef = value;
  }

  return(
    <>
      <h1> Parent ponent here </h1>
      <Child handleClick={handleClick}/>
      <button onClick={handleClick}>Get Ref</button> 
    </>
  )
}


export function Child({handleClick}){
  const childRef = useRef("test")
  handleClick(childRef)
  return(
    <h1> Child Component</h1>
  )
}