Prevent onClick event by clicking on a child div
<p>I'm trying to create a modal in React JS</p>

<p>I have one outter div which is the whole body and I have I inner div. I want to apply the function to close the modal if it's clicked outside of the inner div.</p>

<p>My code is as follows :</p>

<pre><code>popupOutterDivStyle() {
    return {
        zIndex: 10000,
        position: "fixed",
        width: "100%",
        height: "100%",
        top: 0,
        left: 0,
        background: "rgba(102,102,102,0.8)"
    }
}

popupInnerDivStyle() {
    return {
        zIndex: 20000,
        position: "fixed",
        width: "70%",
        top: "50%",
        left: "50%",
        height: "400px",
        marginTop: "-200px", /*set to a negative number 1/2 of your height*/
        marginLeft: "-35%", /*set to a negative number 1/2 of your width*/
        background: "rgba(255,255,255,1)",
        display: 'block'
    }
}

closePopupIcon() {
    return {
        position: "absolute",
        right: -25,
        top: - 27,
        zIndex: 30000,
        cursor: "pointer"
    }
}

render() {

    const animationSettings = {
        transitionName: "example",
        transitionEnterTimeout: 500,
        transitionAppearTimeout: 500,
        transitionLeaveTimeout: 500,
        transitionAppear: true,
        transitionLeave: true
    };

    return (

        &lt;div onClick={this.props.closeModal}&gt;
            &lt;ReactCSSTransitionGroup {...animationSettings}&gt;
            &lt;div key={this.props.modalState} style={this.popupOutterDivStyle()} className={showModal}&gt;

                &lt;div style={this.popupInnerDivStyle()}&gt;
                    &lt;a href="#" style={this.closePopupIcon()} onClick={this.props.closeModal}&gt;&lt;i className="closePopup ion-ios-close-empty" /&gt;&lt;/a&gt;
                    {this.props.children}
                &lt;/div&gt;

            &lt;/div&gt;
            &lt;/ReactCSSTransitionGroup&gt;
        &lt;/div&gt;

    );
}
</code></pre>

<p>When I click on link with the icon or when I click outside of the inner div it's working fine. </p>

<p>But the problem is that it's closed also if I clicked inside the inner div.</p>

<p>I do not want to use jquery.</p>

<p>Any advice?</p>

<p><strong>UPDATE</strong></p>

<pre><code>stopPropagation(event){
    event.stopPropagation();
}


&lt;div&gt;
    &lt;ReactCSSTransitionGroup {...animationSettings}&gt;
     &lt;div id="outter" key={this.props.modalState} style={this.popupOutterDivStyle()} className={showModal} onClick={this.props.closeModal}&gt;

     &lt;div id="inner" style={this.popupInnerDivStyle()} onClick={this.stopPropagation.bind(this)}&gt;
          &lt;a href="#" style={this.closePopupIcon()} onClick={this.props.closeModal}&gt;&lt;i className="closePopup ion-ios-close-empty" /&gt;&lt;/a&gt;
          {this.props.children}
      &lt;/div&gt;

    &lt;/div&gt;
    &lt;/ReactCSSTransitionGroup&gt;
&lt;/div&gt;
</code></pre>

<p>And <code>this.props.children</code> in my case is a contact form :</p>

<pre><code>export default class ContactForm extends React.Component {
constructor(props) {
    super(props);

    this.state = {
        senderName: '',
        email: '',
        message: '',
        errors: {}
    };

    this.sendingHandle = this.sendingHandle.bind(this);
    this.contactHandle = this.contactHandle.bind(this);
}

contactHandle(event) {
    let field = event.target.name;
    let value = event.target.value;
    console.log(field);
}


sendingHandle(event) {
    event.preventDefault();
}


render() {
    const language = this.props.currentLanguage.homePage;

    return (
        &lt;div className="contact-form"&gt;
            &lt;form&gt;
                &lt;div className="col-lg-12 col-md-12 col-sm-12 col-xs-12"&gt;

                    &lt;TextInput
                        type="text"
                        name="senderName"
                        label={language.contactNameLabel}
                        labelClass="contactLabel"
                        placeholder={language.contactNameLabel}
                        className="templateInput"
                        icon="user"
                        iconSize="15x"
                        iconClass="contactFaIcon"
                        onChange={this.contactHandle}
                        value={this.state.name}
                        errors={this.state.errors.senderName}

                    /&gt;

                &lt;/div&gt;
                &lt;div className="col-lg-12 col-md-12 col-sm-12 col-xs-12"&gt;
                    &lt;TextInput
                        type="text"
                        name="email"
                        label={language.contactEmailLabel}
                        labelClass="contactLabel"
                        placeholder={language.contactEmailLabel}
                        className="templateInput"
                        icon="envelope-o"
                        iconSize="15x"
                        iconClass="contactFaIcon"
                        onChange={this.contactHandle}
                        value={this.state.email}
                        errors={this.state.errors.email}
                    /&gt;
                &lt;/div&gt;

                &lt;div className="col-md-12 col-sm-12 col-xs-12"&gt;
                                    &lt;Textarea
                                        className="message"
                                        name="message"
                                        placeholder={language.contactMessageLabel}
                                        label={language.contactMessageLabel}
                                        labelClass="contactLabel"
                                        icon="comments-o"
                                        iconSize="15x"
                                        iconClass="contactFaIcon"
                                        onChange={this.contactHandle}
                                        errors={this.state.errors.message}
                                    /&gt;
                &lt;/div&gt;
                &lt;div className="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center"&gt;
                    &lt;Button text="Verzenden" handleClick={this.sendingHandle.bind(this)}/&gt;
                &lt;/div&gt;
            &lt;/form&gt;
            &lt;div className="clearfix" /&gt;
        &lt;/div&gt;
    );
}
}
</code></pre>