React onClick = {} eventhandler called with no event argument

I have a problem regarding react. Can anyone of you take a look at it?

What’s happening.
1.In category__List component I render <Category__ListItem> Component with “handleOpenModalWithCateogory” function as a prop
Category_List component

        { => (

2.handleOpenModalWithCategory is simple function to setState by using

  handleOpenModalWithCategory = e => {
    const selectedCategory =;
      showModal: true,
      modalSource: "EDIT"

“Category_LIstItem” component recieved the handleOpenModalWithCategory as prop and fire the function when a button is clicked.
Category_ListItem Component

        <button onClick={this.props.handleOpenModalWithCategory}>

The problem here is when I click the button, it calls the function but without event argument. event argument is undefined. Does anyone have a idea ?

If you use the <button> element in an HTML <form>, different browsers will submit different values. Internet Explorer will submit the text between the <button> and </button> tags, while other browsers will submit the content of the value attribute.

What is the value of your button?

Oh sorry, This was my stupid mistake. I didn’t even include form tag and was trying to send

It’s not about form, it’s about button not having a value attribute.

One solution would be:


although it does seem strange to me :thinking: