Passing event arguments: error

Hi there,

I have purchased the React course by Mosh and am going through the materials, currently a little stuck on lesson 14, where he shows how to pass event arguments.

As per the video, I have the below code, within the render method:

render() { 

                <span className={this.getBadgeClasses()}>{ this.formatCount() }</span>
                    onClick={() => this.handleIncrement(product) } 
                    className='btn btn-secondary btn-sm'>Increment</button>

And this is the handleIncrement method code I have:

handleIncrement = product => {
        this.setState({ count: this.state.count + 1 })

Product however, is detected as undefined…

If anyone could help would be great.

The product becomes undefined because you didn’t assign any value.
made little change to your code

<button onClick={() => this.handleIncrement('Some Food') } className='btn btn-secondary btn-sm'> Increment </button>

what is product?

You forgot to define product

Thanks for the response, product is the parameter Mosh passes on the handleIncrement() method on the video, as he writes the code, I know it is not defined, but on his clip it does not have such problem. I am a little confused as to why to be honest.

Linters evolve over time; it is possible that linting rules have changed since he made his video.

You are currently trying to call a method with a variable that does not exist.

You can simply just create a product variable in the class and set it to null for now to bypass the error.

i.e. const product = null

or just pass null as an argument

onClick={() => this.handleIncrement(null) }

1 Like

Thanks for the response :slight_smile:

it’s just an example, that you can pass id or item like this
it’s long time when I watched this course may be he did define product but unable to record that part or might be he didn’t click on that button

anyways You have to define the product