remove component from dom tree on function


(Philipp Kraus) #1

Hello,

I’m new with React, but I’m using the current version (16) with Babel and JSX structure. So I have got in a component within the componentDidMount() method the this code fragement:

componentDidMount() {
    jQuery( "#mycontainer" ).on("click", ".close-link", function() {
        jQuery(this).closest( ".contentwidget" )
                    .fadeOut( 400, function() {
                          this.componentWillUnmount(); <- this fails
                         jQuery(this).remove();
                    } );
    })
}

render() {
       return (<div className="contentwidget"><span><a className="close-link">Close</a></span></div>);
}

The origin code is a lot more complex, so I have a root React component, which contains the jQuery-fadeout call and multiple sub components, which contains a class item “close-link”, If the close-link item is pressed, the closest container should be found, fade-out and removed from the dom tree, but during removing I would like to call the componentWillUnmount() method.

How can I correctly remove a component with calling the unmount from the dom tree in a typescript?