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

I found the solution of passing param as a tag's attribute quite reasonable.

However it has limitations:

• Doesn't work properly when list item has other tags (thus event.target might be different to intended)
• Param could be a string only. Requires serialization and deserialization.

That's why I came up with this library: react-event-param

It:

• Solves the problem of children by searching for needed attribute in parents whenever needed
• Automatically serializes and deserializes param
• Encapsulates the logic of setting and getting. No need to mess with param names

Usage example:

import { setEventParam, getEventParam } from "react-event-param";

class List extends Component {
  onItemClick = e => {
    const index = getEventParam(e.target);
    // Do something with index
  };

  render() {
    return (
      

        {this.props.items.map((itemText, index) => (
          

            {{ itemText }}
          
        ))}
      
    );
  }
}

export default List;