React onClick = {} eventhandler called with no event argument

JavaScript
1

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

        {this.props.categories.map(category => (
          <Category__ListItem
            key={category.id}
            category={category}
            handleOpenModalWithCategory={this.handleOpenModalWithCategory}
          />
        ))}

2.handleOpenModalWithCategory is simple function to setState by using event.target.value

  handleOpenModalWithCategory = e => {
    const selectedCategory = e.target.value;
    this.setState({
      showModal: true,
      selectedCategory,
      modalSource: "EDIT"
    });
  };

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

      <ListItem>
        <div>{this.props.category.category}</div>
        <button onClick={this.props.handleOpenModalWithCategory}>
          edit
        </button>
        <div>remove</div>
      </ListItem>
    );

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 ?

2

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?

3

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

4

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

One solution would be:

      <ListItem>
        <div>{this.props.category.category}</div>
        <button
          onClick={this.props.handleOpenModalWithCategory}
          value={this.props.category.category}>
          edit
        </button>
        <div>remove</div>
      </ListItem>
    );

although it does seem strange to me :thinking: