Coffeescript - React callback: sending child header click back to parent - coffeescript

Question

Just starting to learn Coffeescript, and I'm working with React.js. I'm trying to determine which was clicked, and I've been advised not to use data-attributes on each header. I have some ideas how to handle this under the handleHeaderClick function, but I'm not exactly sure how they should be implemented. I'm also thinking about splitting up the ContactsTable component into a ContactsTableHeader component and a ContactsTableRow component, but I should still have the same issue in ContactsTableHeader - determining which header was clicked.
#Application.cjsx
handleHeaderClick: ->
# childComponent.props
# childComponent.refs
# React.findDOMNode(childComponent.refs.firstName)
# React.findDOMNode(childComponent.refs.lastName)
# React.findDOMNode(childComponent.refs.age)
render: ->
<div>
<ContactsTable contactList={#state.contacts} onClick={#handleHeaderClick} />
</div>
#ContactsTable.cjsx
render: ->
if #props.contactList
contactsList = #props.contactList.map (contact) ->
<tr><td>{"#{contact.firstName}"}</td><td>{"#{contact.lastName}"}</td><td>{contact.age}</td></tr>
<table style={tableStyle}>
<thead style={headerStyle} onClick=#props.onClick>
<tr>
<th>FirstName</th>
<th>Last Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
{contactsList}
</tbody>
</table>

Answer 1

You can do something like this.
#Application.cjsx
handleHeaderClick: (header) ->
#setState({clickedHeader: header})
#do something else
render: ->
<div>
<ContactsTable contactList={#state.contacts} onClick={#handleHeaderClick} />
</div>
#ContactsTable.cjsx
render: ->
if #props.contactList
contactsList = #props.contactList.map (contact) ->
<tr><td>{"#{contact.firstName}"}</td><td>{"#{contact.lastName}"}</td><td>{contact.age}</td></tr>
<table style={tableStyle}>
<thead style={headerStyle}>
<tr>
<th onClick={#props.onClick('FirstName')}>FirstName</th>
<th onClick={#props.onClick('LastName')}>Last Name</th>
<th onClick={#props.onClick('Age')}>Age</th>
</tr>
</thead>
<tbody>
{contactsList}
</tbody>
</table>
Here the clickedHeader is preserved inside the component which is present in Application.cjsx. You can also preserve it inside ContactsTableHeader which should look something like similar.