title: How to fix Cannot read property 'preventDefault' in React?
body: <p><a href="https://i.stack.imgur.com/p6tPM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/p6tPM.png" alt="enter image description here"></a>I have options on React multiple select. I can create new and delete old option. But when i want to use modal with cancel and delete button. i have this problem TypeError: Cannot read property 'preventDefault' of undefined. I need show modal and with conditions delete item or cancel modal.  Trying to do a simple onClick event/function, in ReactJS.</p>
  
  <p>When the button is clicked, I want to run a function called "onClick", but I get this error in console:Have googled, but not sure what I'm going wrong. I've looked at ReactJs documentation and this looks correct, but obviously not. Here's my code:</p>
  
  <pre><code>onRemoveMultipleTypeDomains = (value, e) =&gt; {
      const { startDomainListRemove } = this.props;
      this.handleShow();
      e.preventDefault();
      if (this.handleClose()) {
        return null;
      } else {
        return startDomainListRemove({ value });
      }
    };
  
    onAddMultipleTypeCourseTypes = (newLabelArray, type) =&gt; {
      const { startCourseTypeListUpdate } = this.props;
      if (type === 'courseTypes') {
        return startCourseTypeListUpdate(newLabelArray);
      }
    };
  
    onRemoveMultipleTypeCourseTypes = value =&gt; {
      const { startCourseTypeListRemove } = this.props;
      startCourseTypeListRemove({ value });
    };
  
    handleClose = () =&gt; {
      this.setState({ isModalOpen: false });
    };
  
    handleShow = () =&gt; {
      this.setState({ isModalOpen: true });
    };
  
    render() {
      console.log(this.props);
      const {
        isLoading,
        domainList,
        isError,
        isLoaded,
        error,
        //id,
        courseTypeList,
      } = this.props;
      const pStyle = {
        fontFamily: 'Open sans',
        fontStyle: 'italic',
        color: '#777777',
        fontSize: '14px',
      };
  
      //const countOfDomains = domainList &amp;&amp; domainList.length;
      //const numOfCourseTypes = Object.keys(courseTypeList).length;
  
      if (isError &amp;&amp; !isLoading) {
        if (isStatus(error, 404)) {
          return &lt;NoMatchPage /&gt;;
        }
  
        return (
          &lt;Col&gt;
            &lt;Alert color="danger"&gt;Error while loading the data.&lt;/Alert&gt;
          &lt;/Col&gt;
        );
      }
  
      if (isLoading) {
        return &lt;Loading /&gt;;
      }
  
      return (
        &lt;div&gt;
          &lt;DetailPage&gt;
            &lt;Modal isOpen={this.state.isModalOpen}&gt;
              &lt;ModalHeader closeButton&gt;
                Do you really want to delete this....
              &lt;/ModalHeader&gt;
              &lt;ModalBody&gt;On this item is linked .... !&lt;/ModalBody&gt;
              &lt;ModalFooter&gt;
                &lt;Button color="secondary" onClick={this.handleClose}&gt;
                  Close
                &lt;/Button&gt;
                &lt;Button color="danger" onClick={this.startDomainListRemove}&gt;
                  Delete
                &lt;/Button&gt;
              &lt;/ModalFooter&gt;
            &lt;/Modal&gt;
            &lt;Row&gt;
              &lt;Col sm="4"&gt;
                &lt;PageHeader title="Admin panel" /&gt;
                &lt;p style={pStyle}&gt;
                  As an admin you can add and delete new types of domains, course
                  types, locations, languages and project status.
                &lt;/p&gt;
              &lt;/Col&gt;
            &lt;/Row&gt;
            &lt;Row&gt;
              &lt;Col&gt;
                &lt;MultipleTypeSelect
                  title="Client Domains"
                  type="clientDomains"
                  multipleTypeData={domainList}
                  onAddMultipleType={this.onAddMultipleTypeDomains}
                  onRemoveMultipleType={this.onRemoveMultipleTypeDomains}
                  isMulti
                /&gt;
              &lt;/Col&gt;
              &lt;Col&gt;
                &lt;MultipleTypeSelect
                  title="Course Types"
                  type="courseTypes"
                  multipleTypeData={courseTypeList}
                  onAddMultipleType={this.onAddMultipleTypeCourseTypes}
                  onRemoveMultipleType={this.onRemoveMultipleTypeCourseTypes}
                  isMulti
                /&gt;
              &lt;/Col&gt;
            &lt;/Row&gt;
          &lt;/DetailPage&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <pre><code>class MultipleTypeSelect extends Component {
    updateMultipleTypeOptionList = (options, current) =&gt; {
      const { multipleTypeData } = this.props;
  
      if (options.length &gt; multipleTypeData.length) {
        const { onAddMultipleType, type } = this.props;
  
        const newMultipleTypeArray =
          options &amp;&amp; options.filter(option =&gt; option.__isNew__);
  
        const newLabelArray = newMultipleTypeArray.map(type =&gt; type.label);
  
        return onAddMultipleType(newLabelArray, type);
      } else {
        const { onRemoveMultipleType } = this.props;
        const { removedValue } = current || {};
        const { value } = removedValue || {};
  
        const resultOfRemove = multipleTypeData.find(removedItem =&gt; {
          const { name } = removedItem || {};
          return name === value;
        });
        console.log(onRemoveMultipleType, '------');
  
        return onRemoveMultipleType(resultOfRemove);
      }
    };
  
    getModifiedMultipleTypeData = data =&gt;
      data &amp;&amp;
      data.map(multipleType =&gt; ({
        value: multipleType.name,
        label: multipleType.name,
      }));
  
    render() {
      const { title, multipleTypeData, isMulti } = this.props;
  
      const multipleTypeOptionList = this.getModifiedMultipleTypeData(
        multipleTypeData,
      );
  
      return (
        &lt;FormGroup&gt;
          &lt;h3&gt;{title}&lt;/h3&gt;
          &lt;CreatableSelect
            defaultValue={multipleTypeOptionList}
            options={multipleTypeOptionList}
            onChange={this.updateMultipleTypeOptionList}
            isMulti={isMulti}
            isClearable={false}
          /&gt;
        &lt;/FormGroup&gt;
      );
    }
  }
  </code></pre>