0

I'm using the Reactable library to display data tables in React and I want to set/change the state of my parent component UsersTable, when I click on a row in the table, to remember the id of the clicked record for further actions. Unfortunately I cant' get it done. I try to pass the handleClick function as a prop but I always get an Uncaught TypeError: and handleClick is undefined.

var Table = Reactable.Table;
var Tr = Reactable.Tr;
var Td = Reactable.Td;

var UsersTable = React.createClass({
  propTypes: {
    users: React.PropTypes.array.isRequired,
  },

  handleClick: function(row) {
      this.setState({userId: row.key})
  },

  getInitialState: function() {
    return {
        userId: null
    };
  },

  render: function() {
    return (
            <div className="usersTable">
                <div className="globalUserSearch">
                    <div className="globalUserSearchLabel">Selection:</div>
                    <div><input type="text" className="userSearchInput" placeholder="Global Search"></input></div>
                </div>

                <Table className="table" itemsPerPage={5} sortable={true} handleClick={this.handleClick}>
                    {this.props.users.map(function(row) {
                            return (
                                <Tr key={row.key} onClick={this.props.handleClick.bind(this, row)}>
                                    <Td column="username">{row.personalInformation.username}</Td>
                                    <Td column="firstname">{row.personalInformation.firstname}</Td>
                                    <Td column="lastname">{row.personalInformation.lastname}</Td>
                                </Tr>
                            )
                        })}
                </Table>
            </div>
  )},
});

If I define a function directly at the <Tr> element as it's described here and log the row.key to the console, everything is fine. But as I said, I need to update the state of my parent component.

Any suggestions would be great.

Thx in advance.

tomask
  • 1
  • 3
  • 1) Inside the `map` callback, `this` refers to the global object. See http://stackoverflow.com/q/29192687/218196 and http://stackoverflow.com/q/20279484/218196. 2) Does whatever instantiates `UsersTable` pass a `handleClick` prop to it? You haven't listed in the in the `propTypes`. Or do you actually want to refer to the components own `handleClick` method? That would be `this.handleClick` then, not `this.props.handleClick`. – Felix Kling Oct 30 '15 at 13:56

1 Answers1

0

You could try fixeddatatable as an alternative. Use the onRowClick and you can get the object for that row, index, or event using 

_handleRowClick: function(event, index, row ){


    },

In Table you'll have onRowClick={this.__handleRowClick}

Davet
  • 334
  • 1
  • 3
  • 15