I have a React component ResultsTable with markup only, and all data fetching is done in its container ResultsTableContainer and passed when rendering.
ResultsTable.jsx
const ResultsTable = ({ games, results }) => ( <Table> <TableHeader> <TableRow> <TableHeaderColumn>Date</TableHeaderColumn> <TableHeaderColumn>City</TableHeaderColumn> <TableHeaderColumn>Venue</TableHeaderColumn> <TableHeaderColumn>Host</TableHeaderColumn> </TableRow> </TableHeader> <TableBody> {games.map((game, index) => ( <TableRow key={index} onClick={(index) => results}> <TableRowColumn> {moment(game.gameDate).format("YYYY-MM-DD")} </TableRowColumn> <TableRowColumn>{game.city}</TableRowColumn> <TableRowColumn>{game.venueName}</TableRowColumn> <TableRowColumn>{game.hostName}</TableRowColumn> </TableRow> ))} </TableBody> </Table> ); export default ResultsTable; ResultsTableContainer.jsx
class ResultsTableContainer extends Component { constructor(props) { super(props); this.state = { games: [] }; } componentDidMount = () => { axios .get("public_api/games") .then(resp => { this.setState({ games: resp.data }); }) .catch(console.error); }; handleClick = (i) => { console.log('clicked' + i) }; render() { return ( <ResultsTable games={this.state.games} results={this.handleClick.bind(this)} /> ); } } export default ResultsTableContainer; My challenge is to make each table row clickable, that I can get more information when clicked on the row. However writing this way, does not execute function handleClick and from what I have read also is not the best way to do things, as it will create a new function for each row. So my question would be how can I create onClick handler for that would know which row have I clicked? Or what else may I do to make it work? Also, would really appreciate, if you could point me to a good reading about this topic. Thank you!
