6

I have a Card component that needs to trigger a Modal component.

I also have a generic Overlay component that I am using to display some content above my application.

Here is my App component : 

class App extends Component {
  /* Some Code */
  render() {
    return (
      <div className="c-app">
        <Content /> {/* Our content */}
        <Overlay /> {/* Our all-purpose-overlay */}
        {/* I want my Modal here */}
      </div>
    )
  }
}

I want to use my Overlay component with my Modal component. To get it done, I need both components on the same level (siblings).

And so I did some research on react-portals and I found that I can do the following in my Card component : 

class Card extends Component {
  constructor() {
    super();
    this.state = { showModal: false }
  }

  render() {
    const { showModal } = this.state;
    return (
      {/* Some code */}
      {
        showModal 
          && ReactDOM.createPortal(
            <Modal>{* ... *}</Modal>,
            document.body
          )
      }
    );
  }
}

In the example above, I am sending the Modal into the body element.

Question

How can I get a reference to the App component without sending it through the props?

The thing is that the App component and the Card component are really far apart. It is a little ridiculous to send down the reference of the App component through all the children until it reaches a Card component.

I could also save it it into the Redux Store, but I don't think it is good practice.

How should I fix this? Thanks!

Bird
  • 572
  • 5
  • 15

1 Answers1

1

Redux offers functionality for passing refs without saving them explicitly in the store.

You can set the withRef option as true in your connect() call:

connect(null, null, null, { withRef: true })(<Your component>);

And access the ref by the following method:

ref={connectedComponent =>
        this.<Your component>=
        connectedComponent.getWrappedInstance();

This medium article may prove helpful. https://itnext.io/advanced-react-redux-techniques-how-to-use-refs-on-connected-components-e27b55c06e34 Also were I got the sample code above from.

Rowan Baker-French
  • 339
  • 2
  • 12
  • Hi @Rowan, this is pretty interesting! I have some trouble understanding something with this approach : how does my **Card** component gets access to the reference of the **App** component? Maybe I'm missing something. As i understand it, this creates a reference that is accessible only by the connected component. So if I connect the **App** component in this way, it will a have a reference to itself. Then I can pass it to the children? How does the **Card** component gets access to this reference ? Thanks! :) – Bird Aug 11 '18 at 17:32
  • Sorry for the late reply, I am in the mountains and service is spotty. I believe something along the lines of `App.getWrappedInstance().refs['selector']`. Though normally I would be exposing a ref from a child to a parent, I think this should work though. – Rowan Baker-French Aug 12 '18 at 23:01