How to make event stop propagating in React

0 votes
asked Mar 10, 2017 by stckoverflowaccnt12

First off I did look at all the related answers but none solved my problem. I have the following:

class TweetingBox extends React.Component{
    render(){
        return (
            <div id="page-blackout" onClick={this.props.closeTweetingInterface}>
                <div id="tweeting-box" onClick={(proxy) => {proxy.stopPropogation()}}>
                    <h5 id="tweeting-box-header">Compose new Tweet</h5>
                    <TweetingInterface initialContent={this.props.initialContent}/>
                </div>
            </div>
        )
    }
}

div with id="page-blackout" covers the entire page and div with id="tweeting-box" is centered on the page, containing a form in the component TweetingInterface. When I click anywhere, both in the form as well as on tweeting-box itself, this.props.closeTweetingInterface is called. How can I stop this?

1 Answer

0 votes
answered Mar 10, 2017 by adeel-imran

All the sibling elements will get their parents property, so the parent function will get called closeTweetingInterface every time the parent or the sibling elements get called on.

Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...