Attach the parentSelector to a React component reference

[CMCDragonkai]

The ReactModal component has a parentSelector that is meant to return an HTML node to attach to.

However I want to be able to create modal boxes that are related to a parent component or higher order component.

Is there a way to attach the modal box to a particular react component and somehow forward references from the parent component to the react modal component?

[CMCDragonkai]

Ok so I've tried a couple different methods involving React references, but they all don't work.

const modalContainerRef = React.createRef();

return (
  <div>
    <ContainerComponent ref={modalContainerRef} />
    <ModalComponent parent={modalContainerRef.current} />
  </div>
);

But the above fails because I'm using stateless functional components, and I'm also using styled components. Then it tells me to use React.forwardedRef, but that doesn't seem to work with styled components, I end up with loads of type errors.

Even if I use the old ref style:

let modalContainer;
return (
  <div>
    <ContainerComponent ref={c => {modalContainer = c;}} />
    <ModalComponent parent={modalContainer} />
  </div>
);

Variations of this including the usage of modalContainer.current or () => modalContainer.current all fail because it eventually complains that refs cannot be passed to the stateless functional components.

It seems the only solution is to pass some sort of unique id into the component for it to attach to.

[diasbruno]

Hi @CMCDragonkai, can you make a working example?

[CMCDragonkai]

Well I ended up with just using a unique id and using document.getElementById to attach it, couldn't find a way to use React references when I'm also using stateless functional components.

[diasbruno]

@CMCDragonkai Check out #750, it seem to have an example that can help.