Trouble passing functions, React

1

Hello everyone. I am having an issue with passing a state-changing function as props to my lower components.
In my app.js I have this

updateCart (){
      this.setState(prevState => ({
         cartAmount: prevState.cartAmount + 1
      }));
    }
    ```

And it’s passed though here

<Route path='/Services'

  render={(props) => <Services {...props} propdata={this.state.propdata} cart={this.state.cart} cartAmount={this.state.cartAmount} updateCart={this.updateCart} 

          />}

But for some reason when I use onClick={this.updateCart} in my services component it will crash and tell me that it is undefined.
The function works fine in my app.js (i did some testing) and the state does update in the other components as well. The function is the only issue.
This is my first time passing a function like this, so I am expecting that I made a stupid mistake. Regardless, thank you for your time.

2

Hello there.

Have you binded (bound?) this to the function?

3

If you are passing the method as a prop you have get to it as a prop in the component.

this.props.updateCart

4

I have this above my setState
this.updateCart = this.updateCart.bind(this);
I tried it with and without the ‘props’ just to see and both throw the same error.

5

So I narrowed down the problem. I made a testfunction() with just a simple console log and tried passing it to the services component. It had the same error.

<Route path='/Services'
  render={(props) => <Services {...props} propdata={this.state.propdata} cart={this.state.cart} cartAmount={this.state.cartAmount} updateCart={this.updateCart} 
          />}

So the trouble is in the passing of the function. Has anyone had this error before?

6 
document.addEventListener('click', e => {
      if (e.target.classList.contains('button')) {
        this.props.updateCart()
        
      }
    });

This was my solution, if anyone is curious.
The problem was the function was rendering before the HTML elements. So this is how I got around it. I am just sharing it just in case someone else has a similar issue in the future.
I still appreciate the help I get here at FCC!