React onClick event on component

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={...} />

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>
    );
  }
});