Refs Must Have Owner Warning

[lbelinsk]

Summary:

I upgraded from version 1.6.5 to 2.2.0 and started to see get this error described here:
https://facebook.github.io/react/warnings/refs-must-have-owner.html

Steps to reproduce:

1. Use version 2.2.0 of react-modal.
2. Create an app with modal and another component to be rendered to the dom.
3. add ref prop on the additional component

Expected behavior:

App should work the same as it did before the version's upgrade.

Link to example of issue:

For example, Use react-modal with react-datePicker and you will automatically get this error since react-datePicker has some refs in it's inner implementation.

[luccasmaso]

I have the same problem with a custom modal using the "portal" approach. How should I deal with components rendered inside modal that contains refs?

[diasbruno]

@luccasmaso You can use the refs callback style:

 // The value of the reference can be null, if the element is not mounted yet.
acquireRef = (ref) => {
   this.myCustomView = ref;
}
render() {
  <Modal ...>
     <MyCustomView ref={this.acquireRef} ... />
  </Modal>
}

[lbelinsk]

@diasbruno in my case I am using a third party (react-datepikcer) which doesn't use refs callback style.

I can do a pr there, but I think this problem would just continue to hunt us in the future.
Can you think of a solution in react-modal that will allow us to use the refs in other components (not with callback style) alongside react-modal?

[diasbruno]

Hi @lbelinsk, PRs are always welcome.
Can you write a simple application showing what is happening?