I am having a parent and child component the looks like this
export function Parent(){
function handleClick(){
// Here I need to access Child components ref, that may be taken to this function as a parameter
}
return(
<>
<h1> Parent component 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 component to be accessed inside the parent based on the button click in the parent component?
You can use React.forwardRef to get a hold of the child ref in your parent component.
export function Parent(){
const childRef = useRef();
function handleClick(){
console.log(childRef.current);
}
return(
<>
<h1> Parent component 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 component 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 component 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>
)
}