0

I'm using prime react to create a table, the last column of the table is for the actions that can be performed on the table, however I'm following the docs, but the onClick event is not working on the buttons. When I click on the search button I get the error: "UserList.js:19 Uncaught TypeError: _this2.selectUser is not a function"

Any clues please?

The code:

actionTemplate(rowData, column) {
    console.log('column', column);
    console.log('rowData', rowData);
    return (<div>
      <Button
        type="button" icon="fa-search"
        className="ui-button-success" onClick={() => this.selectUser(1)}
      />
      <Button
        type="button" icon="fa-edit"
        className="ui-button-warning"
      />
    </div>);
  }

  selectUser(userId) {
    console.log('selectUser');
    userId = 1;
    this.props.actions.fetchUser(userId);
  }


    renderTable() {
        const paginatorLeft = <Button icon="fa-refresh" />;
            /* const users = [
                    { name: '1', email: '1981', updateDate: '', creationDate: '05/03/2016' },
                    { name: '2', email: '1982', updateDate: '', creationDate: '04/02/2017' },
            ]; */
        const { users } = this.props;
        return (
          <DataTable
            value={users} paginator paginatorLeft={paginatorLeft}
            rows={10} rowsPerPageOptions={[5, 10, 20]}
          >
            <Column field="name" header="Name" filter style={{ textAlign: 'center', width: '6em' }} />
            <Column field="email" header="Email" filter style={{ textAlign: 'center', width: '6em' }} />
            <Column field="lastUpdate" header="Last update" style={{ textAlign: 'center', width: '6em' }} />
            <Column field="creationDate" header="Creation Date" style={{ textAlign: 'center', width: '6em' }} />
            <Column body={this.actionTemplate} header="Actions" style={{ textAlign: 'center', width: '6em' }} />
          </DataTable>
        );
      }
fgonzalez
  • 3,787
  • 7
  • 45
  • 79
  • Would be helpful to see the beginning of the component. And the end. Assuming you have babel set to transpile this, change your `selectUser(userId) { ...` definition to `selectUser = userId => { ...` – Deryck Apr 29 '18 at 08:29

1 Answers1

5

Try:

<Column body={this.actionTemplate.bind(this)} header="Actions" style={{ textAlign: 'center', width: '6em' }} />

My guess is that actionTemplate is called within another object context that's why selectUser is not defined/a function.

Tomasz Mularczyk
  • 34,501
  • 19
  • 112
  • 166