1

I'm trying to access this.myref.current, but I can't do it when componentDidMount is called. Is there another function I can call that acts when all references are linked?

Note that the issue isn't simply that I can't access the .current, but more specifically that I can't access it during componentDidMount. I can access it later on other events.

export default class Parentextends Component {
    constructor(props) {
        super(props);
        this.myref = React.createRef();
    }

    componentDidMount() {
        this.myref.current.childmethodname(); // this.myref.current is null
    }

    MyFn = () => {
        this.myref.current.childmethodname(); // This works
    }

    render() {
        return (<Child ref={this.myref} />);
    }
}
Karim Abdel Hamid
  • 365
  • 3
  • 12
  • 3
    What is kind of component is `Child`? From the docs: *"You may not use the ref attribute on function components because they don’t have instances."* https://reactjs.org/docs/refs-and-the-dom.html#refs-and-function-components – Felix Kling Jan 31 '19 at 19:20
  • It's a class. Accessing the ref works properly after componentdidmount is called tho. – Karim Abdel Hamid Jan 31 '19 at 19:41
  • @Chase no it's not, it's specifically on componentDidMount, before the references are properly linked. – Karim Abdel Hamid Jan 31 '19 at 19:50
  • @KarimAbdelHamid as stated in the answer to that question, you should find another approach to what you're trying to do. References should not be used that way and React documentation explicitly spells this out. – Chase Jan 31 '19 at 19:51
  • The reason I don't do it that way, @Chase , is because the child contains a textbox, and handleChange and submit functionality within said child. The parent only updates the textbox on a parent event, but also on default. I don't want to spread the functionality everywhere and convolute it. – Karim Abdel Hamid Jan 31 '19 at 19:55
  • @KarimAbdelHamid I still don't think thats a good enough reason, but regardless you will never be able to access the ref in componentDidMount() only lifecycle methods after render() will work since the ref is not actually attached to a VDOM element until then. Try componentDidUpdate() – Chase Jan 31 '19 at 19:58
  • @Chase Is there a first update function or something? Or do I just need to manually add the first boolean logic? – Karim Abdel Hamid Jan 31 '19 at 20:00
  • @KarimAbdelHamid actually let me amend my previous reply. componentDidMount is called after render, but the problem is that the ref is not defined until your child component renders. If it was a DOM element your solution would work fine, but in this case I would set a handler function in your parent and then call that function in componentDidMount of your child component. – Chase Jan 31 '19 at 20:07
  • @Chase Alright, do you wanna post the answer so I can choose it? – Karim Abdel Hamid Jan 31 '19 at 23:19

1 Answers1

0

As Felix stated in his comment, it seems to me that the Child component is a stateless (functional) component, as you can see within this CodeSandbox that everything works fine when utilizing a stateful (class) component.

cjones26
  • 3,459
  • 1
  • 34
  • 51