What is the "ideal" way to pass data to a callback prop? An inline function callback which invokes the prop? Or use prop as is and attach data to the event object?

React-callback-example.jsx

// inline event handler which invokes callback prop
const UsingAnInlineFunction = ({
  itemId,
  itemName,
  itemCount,
  onClick  
}) => (
  <div onClick={() => onClick(itemId)}>
    <span>{`${itemCount}x ${itemName}`}</span>
  </div>
);

// pass callback prop "as is" and send event data as data attrs
const UsingADataAttribute = ({
  itemId,
  itemName,
  itemCount,
  onClick  
}) => (
  <div onClick={onClick} data-item-id={itemId}>
    <span>{`${itemCount}x ${itemName}`}</span>
  </div>
);


class ParentComponent extends React.Component {
  constructor(props) {
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    // I need itemId here, how best to receive it?
  }
  render() {
    return (
      <ul>
        {this.props.items.map(item => (
           <li key={item.id}>
            <UsingAnInlineFunction
              itemId={item.id}
              itemName={item.name}
              itemCount={item.quantity}
              onClick={this.handleClick}
            />
            <UsingADataAttribute
              itemId={item.id}
              itemName={item.name}
              itemCount={item.quantity}
              onClick={this.handleClick}
            />
          </li>
        ))}
      </ul>
    );
  }
}

Having posted this on twitter.com, got a number of further suggestions which I'll list below

• Make the child component an ES6 class, declare and bind methods there, and invoke the prop callback explicitly (https://twitter.com/VilleImmonen/status/794139708037234688)
• Use autobind-decorator
• Use a higher-order function as the callback (https://twitter.com/Sander_Spies/status/794146369523040256). I didn't really understand this entirely at first, but I think it's suggesting the following kind of thing

constructor(props) {
  super(props);
  this.handleClick = this.handleClick.bind(this);
}

handleClick(item) {
  return (evt) => {
    // we have item here
  }
}

render() {
  return (
    <
      ....
      ....    
      onClick={this.handleClick(item)}
      ....
    />
  );
}

We can go one better and remove the .bind from the constructor a la

handleClick = item => evt => {
  // we have item here
}

render() {
  return (
    <
      ....
      ....    
      onClick={this.handleClick(item)}
      ....
    />
  );
}

Thanks to @SanderSpies for this one.