Whatever is in the curly braces is what is returned to the listener. The listener is expecting a function that will be called when the event is fired.
onClick={handleDelete(id)}
This won't work because you're calling handleDelete immediately and assigning the result of calling that function to the listener. That function may return an explicit value or undefined (note: that explicit value may be a a new function (closure) which can be assigned to the listener - but in this case I doubt this is happening).
onClick={() => handleDelete(id)}
This will work because you're assigning a function to the listener, and when the event is fired it will call that function which, in turn, will call handleDelete(id).
onClick={handleDelete}
This will also work because you're passing a reference to the handleDelete function to the listener, and that function will get called when the event is fired.
(Note: doing it this way would mean that the component would need to be rewritten to have a data-id attribute that the function can pick up because you're no longer sending an explicit id argument to handleDelete when you call it.)
Videos
How to handle multiple button onClick events in React?
How to trigger a click event in a React functional component?
What is the event target in React?
Whatever is in the curly braces is what is returned to the listener. The listener is expecting a function that will be called when the event is fired.
onClick={handleDelete(id)}
This won't work because you're calling handleDelete immediately and assigning the result of calling that function to the listener. That function may return an explicit value or undefined (note: that explicit value may be a a new function (closure) which can be assigned to the listener - but in this case I doubt this is happening).
onClick={() => handleDelete(id)}
This will work because you're assigning a function to the listener, and when the event is fired it will call that function which, in turn, will call handleDelete(id).
onClick={handleDelete}
This will also work because you're passing a reference to the handleDelete function to the listener, and that function will get called when the event is fired.
(Note: doing it this way would mean that the component would need to be rewritten to have a data-id attribute that the function can pick up because you're no longer sending an explicit id argument to handleDelete when you call it.)
Before explaining the differences, you have mismatching braces in the second one.
The second one is called an invoked function. That means when the component mounts the function, it runs without clicking the button. The other one is a callback function. It will run when the user clicks the button.
This depends on your SensorItem component's definition. Because SensorItem isn't a native DOM element but, like you said, another React component, onClick as defined here is simply a property of that component. What you need to do is, inside of the SensorItem component pass the onClick prop to an DOM component's onClick event:
var SensorItem = React.createClass({
render: function() {
return (
<div className="SensorItem" onClick={this.props.onClick}>
...
</div>
);
}
});
Problem
The problem, as being explained in another answer, is that onClick on a <SensorItem> React component (contrary to native DOM element like <div> or <p>) is treated as passing of component property, and not of a DOM event handler. And as most likely your <SensorItem> component doesn't declare onClick property, that property value simply gets lost.
Solution
The most straightforward solution is to add onClick property explicitly on SensorItem component, then pass it to the root DOM element of that component:
function SensorItem({ prop1, prop2, onClick }) {
(...)
return (
<p onClick={onClick}>
(...)
</p>
);
}
But the solution that usually works best for me is to group all the undefined component's properties using object destructuring notation, then pass them all to the root DOM element within that component. This way you can pass onClick, onHover, className etc. without needing to define separate properties for each one of them:
function SensorItem({ prop1, prop2, ...rootDOMAttributes }) {
(...)
return (
<p {...rootDOMAttributes}>
(...)
</p>
);
}
No matter which of the two approaches you use, the handler will now work, as it'll now be attached to the root DOM element of SensorItem:
<SensorItem onClick={...} />