Button onClick event inside react datatable doesn't work

Question

I have written a render function and have provided the buttons for edit and delete in each row of the datatable. onclick event is using react redux action method. but when I click edit/delete button I get 'Cannot read property 'props' of undefined' error

import { DataTable } from 'react-data-components';
    <DataTable
      keys="title"
       columns={[
       { title: 'Report Name', prop: 'title'},
       { title: 'Author', prop: 'username'},
       { title: 'date Created', prop: 'datecreated'},
       { title: 'Date Modified', prop: 'datelastmodified'},
       {title:'Actions', render:function(val, row) {
          return React.createElement( "div", null,
           React.createElement( "button", {className:"btn", onClick:(e)=>this.props.EditReport(row.reportid)}, 'Edit'),
           React.createElement( "button", {className:"btn", onClick:(e)=>this.props.DeleteReport(row.reportid)}, 'Delete')
       )
     }
     }
  ]}
  initialData={this.props.savedReportList.data}
  initialPageLength={5}
 />

const mapDispatchToProps = (dispatch) => {
  return {
      EditReport: (reportID) => dispatch(EditReport(reportID)),
      DeleteReport: (reportID) => dispatch(DeleteReport(reportID))
  }
}

is this your full code ? Did you use class base or function base component ? — thelonglqd
Additionally have you used function connect from react-redux? — Maciej Trojniarz
Yes I have imported connect as well as redux action method. import { connect } from 'react-redux'; import {EditReport,DeleteReport} from './Actions'; — Bhavya Nayak

Madhav Sharma Madhav Sharma · Accepted Answer · 2019-11-22T07:35:35

This is happening because you are using this out of scope. What are you trying to achieve? We can take it from there.

Button onClick event inside react datatable doesn't work

1 Answers