javascript - Create React SyntheticEvent to hide/show div onClick and onTouchEnd? -

i have notification component looks this:

when click bell button, notification container pops up, so:

i have functionality set when user clicks or touches outside of notification container, box closes. however, not want add events dom directly. i'd rather take advantage of react's syntheticevent wrapper. know how use syntheticevent, instead of dom events have?

here code far:

import react 'react'; import { proptypes } 'prop-types'; import './notification.scss';  export default class notification extends react.component {   constructor(props) {     super(props);      this.setnotificationwrapper = this.setnotificationwrapper.bind(this);     this.handleclickoutside = this.handleclickoutside.bind(this);      this.state = {       visible: false,       hasnotifications: false,       expanded: false,     };      this.togglenotificationcontainer = this.togglenotificationcontainer     .bind(this);   }    componentdidmount() {     document.addeventlistener('touchend', this.handleclickoutside);     document.addeventlistener('mousedown', this.handleclickoutside);   }    componentwillunmount() {     document.removeeventlistener('touchend', this.handleclickoutside);     document.removeeventlistener('mousedown', this.handleclickoutside);   }    setnotificationwrapper(node) {     this.notificationwrapper = node;   }    handleclickoutside(event) {     if (this.notificationwrapper &&       !this.notificationwrapper.contains(event.target)) {       this.togglenotificationcontainer();       event.preventdefault();     }   }    togglenotificationcontainer() {     this.setstate({       visible: !this.state.visible,       hasnotifications: this.state.hasnotifications,       expanded: !this.state.expanded,     });   }    createnotificationitems(option, index) {     this.state.hasnotifications = true;      return (       <li         key={index}         value={index}       >         {option.label}       </li>     );   }    render() {     // set details show in list.     let notificationoptions = null;     let optioncount = 0;     let toggledivdetails = null;     let buttonstylename = '';     let buttontext = null;      if (this.props.notificationbuttonicon) {       buttonstylename = 'notificationbutton';     } else {       buttontext = this.props.notificationbuttontext;       buttonstylename = 'notificationbuttonwithtext';     }      toggledivdetails = (       <button         onclick={this.togglenotificationcontainer}         stylename={this.state.expanded ? 'expanded' : buttonstylename}         disabled={this.state.expanded}       >         {buttontext}       </button>     );      if (this.props.options) {       optioncount = this.props.options.length;       notificationoptions = this.props.options.map((option, index) =>       this.createnotificationitems(option, index));     }      if (optioncount === 0) {       this.state.hasnotifications = false;     }      return (       <div stylename="notificationbar">         {toggledivdetails}         <span           stylename={             this.state.hasnotifications ? 'notificationcount' : 'hidden'           }         >           {optioncount}         </span>         {           this.state.visible &&           <div             stylename="notificationcontainer"             ref={this.setnotificationwrapper}           >             <h3 stylename="notificationheading">notifications</h3>             <h4 stylename="notificationsubheading">               {optioncount} notifications             </h4>             <ul stylename="notificationlist">               {notificationoptions}             </ul>           </div>         }       </div>     );   } }  notification.proptypes = {   options: proptypes.arrayof(proptypes.object),   notificationbuttonicon: proptypes.bool.isrequired,   notificationbuttontext: proptypes.string.isrequired, };  notification.defaultprops = {   options: [],   notificationbuttonicon: true,   notificationbuttontext: 'toggle notifications', };