title: React.js inline function getting error onClick: TypeError: _this2.<function-name> is not a function
body: <p>I'm stuck on this simple issue where when I click on a button, I'm trying to fire multiple functions at the same time, inside of an <code>onClick</code> event on a button. However, when I try to do this, I get this error:</p>
  
  <p><code>Uncaught TypeError: _this2.removeLocation is not a function</code></p>
  
  <p>Here is my function:</p>
  
  <pre><code>const renderLocations = ({ fields, meta: { touched, error, submitFailed } }) =&gt; {
  
      return (
        &lt;div&gt;
          &lt;div className={styles.contactInfoSection}&gt;
            &lt;h2&gt;Locations&lt;/h2&gt;
            &lt;div&gt;
              &lt;button type="button" className={styles.add} onClick={() =&gt; fields.push({})}&gt;Add Location&lt;/button&gt;
              {(touched || submitFailed) &amp;&amp; error &amp;&amp; &lt;span&gt;{error}&lt;/span&gt;}
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;ul className={styles.locationsList}&gt;
            {fields.map((location, index) =&gt;
              &lt;li className={styles.locationCard} key={index}&gt;
                &lt;div&gt;
                  &lt;Field
                    name={`${location}.street`}
                    hintText="Street"
                    component={TextField}
                    label="Street"/&gt;
                  &lt;Field
                    name={`${location}.city`}
                    hintText="City"
                    component={TextField}
                    label="City"/&gt;
                  &lt;Field
                    name={`${location}.state`}
                    hintText="State"
                    component={TextField}
                    label="State"/&gt;
                  &lt;Field
                    name={`${location}.zip`}
                    hintText="Zip"
                    component={TextField}
                    label="Zip"/&gt;
                &lt;/div&gt;
                &lt;button
                  type="button"
                  title="Remove"
                  onClick={() =&gt; {
                    fields.remove(index);
                    this.removeLocation();
                  }}&gt;Remove&lt;/button&gt;
              &lt;/li&gt;
            )}
          &lt;/ul&gt;
        &lt;/div&gt;
      );
    }
  </code></pre>
  
  <p>I'm trying to fire a function from inside my component that looks like this:</p>
  
  <pre><code>export class ManageCustomerForm extends React.Component { 
  
    constructor(props) {
      super(props);
  
      //this.removeLocation = this.removeLocation.bind(this);
    }
  
    removeLocation() {
      console.log('remove location?');
      this.props.removeLocation();
    }
  
  }
  </code></pre>
  
  <p>Does anyone know what the issue here is?</p>