Passing function to another component using functional React and React-Tables-CodePudding

I am trying to pass a function to BlogTable. BlogTable contains a react-table where I pass in columns and the data. I also want to pass in some functions so I can update the data in the table using an AJAX call. However, it seems the props argument is not correct and my onClick() does not have a function to click on.

The error I receive is:

TypeError: Cannot read properties of undefined (reading 'handleClick')

This is an excerpt of the code:

<BlogTable columns={columns}
           data={dataTable}
           handleClick={getData}

export default function BlogTable({ columns, data, props }) {

const {
    ...
} = useTable({
    columns,
    data,
}, usePagination);


<button
       type="button"
       onClick={() => props.handleClick('val')} />

I am passing in a function as I would like to update the data table which is in the parent element.

CodePudding user response：

You're passing in handleClick but have props defined in your BlogTable function. props should be handleClick if you're using the destructuring {}.

export default function BlogTable({ columns, data, handleClick }) {

const {
    ...
} = useTable({
    columns,
    data,
}, usePagination);

<button
       type="button"
       onClick={() => handleClick('val')} />