How to call a React component function from inside a javascript function?

Question

I am in an event function and I would like to create a new alert popup (I am using the react-portal library):

onNewAlert: function(username) {

    var divModal = (
        <Portal ref={'Portal'+username}>
                <div id={'div'+username}>
                    <br /><br/ >Alert for {username}
                </div>
        </Portal>);
    ...
}

But then I would have to call a function that is inside a Portal. I could normally do this with references if I was in the render() function, but I am in an event.

    this.refs['Portal'+username].openPortal(); // openPortal is a function of the Portal component

Is there a way to call a component function for a component created on the fly in a javascript function?

@Aaron I do not see such property in the portal.js source code but thanks for the idea, I guess I can modify his source code... — Bruno
– Bruno, Commented Aug 5, 2016 at 21:24
The docs mention isOpen but I see isOpened in the source code... — Aaron Beall
– Aaron Beall, Commented Aug 5, 2016 at 21:25
You gave me an idea...I'm trying to code a wrapper over the Portal (kindof PortalFactory) but maybe someone else will have a better idea — Bruno
– Bruno, Commented Aug 5, 2016 at 21:29
could you please add a minimal complete component that demonstrates your problem — webdeb
– webdeb, Commented Aug 5, 2016 at 21:40

pgraham · Accepted Answer · 2016-08-06 03:38:11Z

1

Even if you could call portal.openPortal() it wouldn't do anything since the component created in the event handler wouldn't be attached to the DOM.

Instead of trying to render the Portal in the event handler function, the event handler should change the component state which will trigger render().

onNewAlert: function(username) {
    this.setState({ showAlert: true });
}

The render() function would then use the state variable for the Portal component's isOpened property:

render: function () {
    return (
        <div>
            ...
            <Portal isOpened={this.state.showAlert}>
                ...
            </Portal>
        </div>
    );
}

edited Aug 6, 2016 at 3:38

answered Aug 6, 2016 at 3:29

pgraham

4464 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to call a React component function from inside a javascript function?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related