React js onClick can't pass value to method

Question

I want to read the onClick event value properties. But when I click on it, I see something like this on the console:

SyntheticMouseEvent {dispatchConfig: Ob         


        

Answer 1

There are couple of ways to pass parameter in event handlers, some are following.

You can use an arrow function to wrap around an event handler and pass parameters:

 this.handleClick(id)} />

above example is equivalent to calling .bind or you can explicitly call bind.

Apart from these two approaches, you can also pass arguments to a function that is defined as a curry function.

handleClick = (id) => () => {
    console.log("Hello, your ticket number is", id)
};