ReactJS - Call a component function from outside for multiple instances

Question

I want to call a method exposed by a React component from the outside of React for multiple instances. In bellow exmaple, I wanted to fire the respective toggleOverlay method when the user clicks on anywhere of article DIV. The main DIV is not rendered through React, it was rendered from server-side (AEM) and I can add vanilla javascript into article div to attached the click event.

The configData for each component is different which comes thourgh AEM (server sides).

Example:

<div class="main">
    <div class="article">
        <h3>Lorem Ipsum</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        <articleOverlay configData="" /> 
    </div>
    <div class="article">
        <h3>Lorem Ipsum</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        <articleOverlay configData="" />
    </div>
    <div class="article">
        <h3>Lorem Ipsum</h3>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        <articleOverlay configData="" />
    </div>
</div>


// articleOverlay component
class articleOverlay extends React.Component {
    constructor(props) {
        super(props);
    
        this.state = {
            showOverlay: false
        };

        window.articleOverlay = this;

       toggleOverlay = (e) => {
           if (this.state.showFlyout) {
               this.setState({ showOverlay: true }
           }else{
               this.setState({ showOverlay: false }
           }
       }

    }

    render() {
        const { configData } = this.props;
        return (
            <div className="article-overlay">
                <button className="article-overlay__button" onClick={this.toggleOverlay}>View flows</button>
                {
                    this.state.showOverlay && 
                    <div className="article-overlay__body">
                        <div className="article-overlay__item">
                            {configData.name}
                        </div>
                    </div>
                }
            </div>
        );
    }

}

I had tried to expose the method on window object using - window.articleOverlay = this; and

Calling using -

document.querySelector('.article').addEventListener('click', function(){
  window.articleOverlay.toggleOverlay();
});

But suspecting it should not work for multiple instances, answer from here https://stackoverflow.com/a/50466217/2479903

Is there a way to achieve this?

CertainPerformance · Answer 1 · 2021-04-15T06:04:29.040

1

There's no need to make the function global, just add the event listener to the element in a componentDidMount, and there won't be any issues with multiple listeners that way either.

And since you have multiple articles, don't use querySelector. If the .article isn't part of React, but a parent of the root node, it looks like the best thing to do is attach a ref to a rendered element, then use .closest on it to find the article.

Change

<div className="article-overlay">

to

<div className="article-overlay" ref={div => this.article = div.closest('.article') }>

and use

componentDidMount() {
  this.article.addEventListener('click', this.articleOverlay);
}
// cleanup too...
componentWillUnmount() {
  this.article.removeEventListener('click', this.articleOverlay);
}

edited Apr 15 '21 at 06:04

answered Apr 15 '21 at 04:36

CertainPerformance

356,069
52
309
320

Okey, does it work for multiple instances of article div's? – Daniel Smith Apr 15 '21 at 04:37
Yes, just like the answer says - there won't be any issues with multiple listeners – CertainPerformance Apr 15 '21 at 04:38
Many thanks! Let me try it out in application and let you know. – Daniel Smith Apr 15 '21 at 04:39
Not working. click on the first article opened all overlay and if I click except first nothing is happened. – Daniel Smith Apr 15 '21 at 05:44
Oh, I see, you have multiple overlays. You'll need to use `.closest` to get to the ancestor article instead of using `querySelector` – CertainPerformance Apr 15 '21 at 05:57
Yeah, I'm trying to figure out what you're doing. You say the main div isn't rendered through React, but you're using `` inside the `class="main"` part? Do you actually do `ReactDOM.render` for each of those `articleOverlay` sections? – CertainPerformance Apr 15 '21 at 06:00

ReactJS - Call a component function from outside for multiple instances

1 Answers1