How to pass static data to react component from array - reactjs

Question

So I have a react component that has a table, the rows are loaded from the server. It also has a Modal component that shows details of the element selected. Right now, when a row is selected, it is set as selected on the state, and the modal receives whatever the selected item is when it is displayed. This leads to some trouble for two reasons: the most recently clicked item is not always set as selected on time and when reloading data from the server (once a minute) there can't be a selected item because there are no items.
What I am trying to do is instead have each item, when clicked, open the modal with its properties.
I tried adding a callback to the table like:
var StripedTable = React.createClass ({
handleClick(index) {
console.log(this.props.callback)
if(this.props.callback)
return this.props.callback(index);
},
render() {
return (
<table className="table table-striped">
<thead>
<tr>
{this.props.headings.map((heading) => {
return <th key={newId()}>{heading}</th>
})}
</tr>
</thead>
<tbody>
{this.props.rows.map((row, index) => {
return (<Tr key={newId()} row={row} onClick={this.handleClick.bind(this, index)}/>)
})}
</tbody>
</table>
)
}
})
This logs the bound method, which is just printing the index to the console, but the printing doesn't happen. Here is the main component's render:
render() {
return (
<Row>
<Col size="12">
<Panel>
<PanelHeading heading="Monitoreo"/>
<PanelBody>
<Row><ProgressBar value={routePercentage} text={delayedText}/>
</Row>
<StripedTable rows={rows} headings={tableHeadings} callback={this.test}/>}
</PanelBody>
</Panel>
</Col>
</Row>
<Modal modalId="stopsModal" cancelText="Cancelar" title="Paradas" width="1100" color="#F7F7F7"
footer={
<ModalButtons>
<button type="button" className="btn btn-flat-primary" data-dismiss="modal">Cerrar</button>
</ModalButtons>
}>
<RouteStops route={this.state.selectedRoute} ref="routeStops"/>
</Modal>
)
}
})
But even though the output from handleClick() is bound(), the function is not called. I removed the modal and the bound method from rows elements, but the result was the same.
EDIT:
Adding the working versions of the table and tr components.
TR:
var Tr = React.createClass ({
propTypes: {
callback: React.PropTypes.func, // receives index of item clicked
index: React.PropTypes.number // index of item
},
handleClick() {
if(this.props.callback)
return this.props.callback(this.props.index);
},
render() {
var cells = this.props.row.map((cell) => {
return <Td key={newId()} text={cell}/>
})
return <tr onClick={this.handleClick}>{cells}</tr>
}
})
Table:
var StripedTable = React.createClass ({
propTypes: {
callback: React.PropTypes.func, // receives index of item clicked
},
render() {
return (
<table className="table table-striped">
<thead>
<tr>
{this.props.headings.map((heading) => {
return <th key={newId()}>{heading}</th>
})}
</tr>
</thead>
<tbody>
{this.props.rows.map((row, index) => {
return (<Tr key={newId()} row={row} index={index} callback={this.props.callback}/>)
})}
</tbody>
</table>
)
}
})

Answer 1

The issue will most likely be in your Tr component, make sure to use the onClick prop you are passing from your StripedTable component
const Tr = React.createClass({
render() {
return (
<tr onClick={ this.props.onClick }>
<td>things</td>
</tr>
);
}
});