CODEWITHSUNDEEP
javascriptreactjsprimereact
fgonzalez
fgonzalez

Reputation: 3887

Button in Prime React Table not working

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>
        );
      }

Upvotes: 0

Views: 4651

Answers (1)

Tomasz Mularczyk
Tomasz Mularczyk

Reputation: 36199

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.

Upvotes: 5

Related Questions