Getting data from TableRow component in Material UI

Question

I'm using a Table component in the newest version of Material UI, and I'm not sure how I'm supposed to be acquiring data from a Table's row when it's selected.

The documentation mentions a prop for the Table component called onRowSelection, but it only gives you a RowNumber for the row that was selected, nothing else.

How are you supposed to make any use of this at all? I don't understand how you're meant to grab say...the key prop that's set to the TableRow using nothing but the RowNumber prop of that same TableRow.

Code below shows how I'm rendering the table itself, and assigning the key:

handleSelect(id) {
  console.log(id);
  this.props.dispatch({ type: 'SET_SELECTED_USER', user: id });
}

renderUsers() {
  if (this.props.users && this.props.currentUser) {
    const currUser = this.props.currentUser.username;
    const userList = this.props.users.map((user) => {
      if (currUser !== user.username) {
        return (
          <TableRow key={user._id}>
            <TableRowColumn>{user.username}</TableRowColumn>
            <TableRowColumn>{user.roles[0]}</TableRowColumn>
          </TableRow>
        );
      }
    });
    return userList;
  }
}

I just don't understand how the RowNumber of the row being selected is supposed to help me whatsoever, when I need to access they key of the row instead.

Any assistance would be really appreciated! Thanks!

Docs for Table: http://www.material-ui.com/#/components/table

Answer 1

You could use the row number as an index in your users array (this.props.users):

handleSelect(userIndex) {
  const currUser = this.props.currentUser.username;
  const users = this.props.users.filter(user => user.username !== currUser)
  this.props.dispatch({ type: 'SET_SELECTED_USER', user: users[userIndex].id });
}