I have a React component called <SensorList />
that has many child <SensorItem />
s (another React component). I want to be able to declare an onClick
event on each <SensorItem />
from within <SensorList />
. I have tried doing the following:
sensorSelected: function(sensor) { console.log('Clicked!');},render: function() { var nodes = this.state.sensors.map(function(sensor) { return (<SensorItem onClick={ this.sensorSelected } /> ); }.bind(this)); return (<div className="sensor-list"> { nodes }</div> );}
Needless to say, I do not get any "Clicked!" coming up in my console. The React inspector in Chrome indicates that an onClick
event is registered, with the above function body as it should be.
I conclude, therefore, that I can't register onClick
events on the actual <SensorItem />
tags (I'm not sure why this is, however). How do I go about achieving this otherwise?