Is it possible to pass a element ref from a child functional component to its parent functional component?

Question

This post is as close as I could find, but I am still unable to get it working for 2 functional components. Please let me know if I can answer any further questions or provide more information. Thank you so much for your time.

The accepted answer of the link you gave us already tell you how it works with functional component, keep reading and if it does not work then show us the code so we can investigate your problem :) — Quentin Grisel, Apr 28 '20 at 19:56

score 0 · Answer 1 · answered Apr 29 '20 at 08:42

In your link, That answer does not export the Parent Component. May be that is the reason for not working in your side. Please check the below example with export.

import React, {Component} from 'react';

const Child = ({setRef}) => <input type="text" ref={setRef}/>;

export class Parent extends Component {
    constructor(props) {
        super(props);
        this.setRef = this.setRef.bind(this);
    }

    componentDidMount() {
        // Calling a function on the Child DOM element
        this.childRef.focus();
    }

    setRef(input) {
        this.childRef = input;
    }

    render() {
        return <Child setRef={this.setRef}/>
    }
}

Is it possible to pass a element ref from a child functional component to its parent functional component?

1 Answers1