title: React onChange is not a function when passing method as props to child component
body: <p>I am having issues when passing a method down into several child components lower. I need to hold state in the parent component, hence the reason for passing the method down to change the state values in parent. Now I know this has been answered several times before, but everything I read does not work?</p>
  
  <p>Here is what i'm trying to do:</p>
  
  <p>Parent method code (OrderView.js):</p>
  
  <pre><code> handleChargesDateChange = (e) =&gt; {
      const date = e.target.value;
      const chargeId = e.target.name;
      console.log(date);
      this.setState({
          updatedChargeDates: [
              ...this.state.updatedChargeDates,
              {[chargeId]: date}
          ]
      })
  }
  </code></pre>
  
  <p>This method then gets passed down as props within <code>render()</code>:</p>
  
  <pre><code> &lt;Grid.Row&gt;
              &lt;Grid.Column width={16}&gt;
                  &lt;OrderSummary
                      order={this.state.order}
                      fuelTypes={this.state.fuelTypes}
                      vehicleClasses={this.state.vehicleClasses}
                      deviceTypes={this.state.deviceTypes}
                      chargeTypes={this.state.chargeTypes}
                      featureTypes={this.state.featureTypes}
                      itemGroups={this.state.itemGroups}
                      itemTypes={this.state.itemTypes}
                      **updateChargeDates={this.handleChargesDateChange}**
                  /&gt;
              &lt;/Grid.Column&gt;
          &lt;/Grid.Row&gt;
  </code></pre>
  
  <p>Then within <code>OrderSummary</code> I receive the props as follows and again pass this down to another Child component:</p>
  
  <pre><code>const updateChargeDates = this.props;
  
      console.log("Itemsssss " + this.props.order.items);
      const panes = [];
      if (this.props.order.devices.length &gt; 0) {
          panes.push({
              menuItem: 'Devices', render: () =&gt; &lt;DevicesTab
                  devices={this.props.order.devices || []}
                  fuelTypes={this.props.fuelTypes || []}
                  vehicleClasses={this.props.vehicleClasses || []}
                  deviceTypes={this.props.deviceTypes || []}
                  chargeTypes={this.props.chargeTypes || []}
                  featureTypes={this.props.featureTypes || []}
              /&gt;
          });
      }
  
      if (this.props.order.items.length &gt; 0) {
          panes.push({
              menuItem: 'Additional Items', render: () =&gt; &lt;ItemsTab
                  items={this.props.order.items || []}
                  itemGroups={this.props.itemGroups || []}
                  itemTypes={this.props.itemTypes || []}
                  chargeTypes={this.props.chargeTypes || []}
                  **updateChargeDates={updateChargeDates}**
              /&gt;
          })
      }
  </code></pre>
  
  <p>Again, I then pass this down to another child into the <code>ItemsTab</code> component:</p>
  
  <pre><code> render() {
      const { items, itemGroups, itemTypes, chargeTypes, updateChargeDates } = this.props;
      return &lt;Tab.Pane className='no-border'&gt;
          {items.length &gt; 0 &amp;&amp; &lt;Grid&gt;
              &lt;Grid.Row columns={2}&gt;
                  &lt;Grid.Column&gt;
                      &lt;ItemGroup
                          itemOrder={items[this.state.currentItem] || {}}
                          itemGroups={itemGroups || []}
                          itemTypes={itemTypes || []}
                      /&gt;
                  &lt;/Grid.Column&gt;
                  &lt;Grid.Column&gt;
                      &lt;Charges
                          charges={items[this.state.currentItem].charges || {}}
                          chargeTypes={chargeTypes || []}
                          handleDateChange={this.handleChange}
                          **updateChargeDates={updateChargeDates}**
                      /&gt;
                  &lt;/Grid.Column&gt;
              &lt;/Grid.Row&gt;
  </code></pre>
  
  <p>Then finally, in the <code>Charges</code> component I try and use the method to just simply update a date:</p>
  
  <pre><code> render() {
   const {charges, chargeTypes, updateChargeDates} = this.props;
   if (charges.length === 0) { return null; }
  
  return &lt;Form&gt;
      &lt;h3&gt;Charges&lt;/h3&gt;
      {charges.map(charge =&gt; {
          console.log(charge);
          const chargeType = chargeTypes.find(type =&gt; type.code === charge.type) || {};
          return &lt;Grid&gt;
              &lt;Grid.Row columns={2}&gt;
                  &lt;Grid.Column&gt;
                      &lt;Form.Input
                          key={charge.id}
                          label={chargeType.description || charge.type}
                          value={Number(charge.amount).toFixed(2)}
                          readOnly
                          width={6} /&gt;
                  &lt;/Grid.Column&gt;
                  &lt;Grid.Column&gt;
                      &lt;DateInput
                          name={charge.id}
                          selected={this.state.newDate}
                          **onChange={updateChargeDates}**
                          value={charge.effectiveDate}
                      /&gt;
                  &lt;/Grid.Column&gt;
              &lt;/Grid.Row&gt;
          &lt;/Grid&gt;
      })}
      &lt;Divider hidden /&gt;
      &lt;br /&gt;
  &lt;/Form&gt;
  }
  </code></pre>
  
  <p>NOTE: I have highlighted the bits of code I care about with <code>**</code></p>
  
  <p>The error I am receiving in the browser console is as follows:</p>
  
  <p><a href="https://i.stack.imgur.com/pUieT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/pUieT.png" alt="enter image description here"></a></p>
  
  <p>Now I know generally this error occurs when you dont <code>bind</code> the method to the class, but I am using the => ES6 syntax which I thought does not require this? I have even tried adding the binding to the parent component as follows:
  <code>this.handleChargesDateChange = this.handleChargesDateChange.bind(this);</code></p>
  
  <p>But again this does not work. I have tried the following resources but no luck:</p>
  
  <p><a href="https://stackoverflow.com/questions/37241912/passing-method-as-props-to-all-children">Passing props down to childs</a></p>
  
  <p><a href="https://stackoverflow.com/questions/39588855/react-onchange-is-not-a-function">OnCHange is not a function</a></p>
  
  <p>Can someone PLEASE explain where im going wrong? As ive benn trying this for hours now and no luck :/</p>
  
  <p>Thanks!</p>