React Redux onDeleteClick isNot Function

Question

I am using react-bootstrap-table to implemetnt table in react. My problem is onDeleteClick method. In the example below, this function works correctly.

const StorehouseListTest = ({ storehouses, onDeleteClick }) => (
  <table className="table">
    <thead>
      <tr>
        <th />
        <th>Name</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      {storehouses.map(storehouse => {
        return (
          <tr key={storehouse.id}>
            <td>
              <Link to={"/skladiste/" + storehouse.slug}>{storehouse.storehouse_name}</Link>
            </td>
            <td>
            <button
                className="btn btn-outline-danger"
                onClick={() => onDeleteClick(storehouse)}
              >
                Delete
              </button>
            </td>
          </tr>
        );
      })}
    </tbody>
  </table>
);

However, in the code below I use react-bootstrap-table-next when I want to include onDeleteClick in function actionsLink button and I get the error that "onDeleteClick is not a function" when press button.

import React from "react";
import PropTypes from "prop-types";

import BootstrapTable from 'react-bootstrap-table-next';
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
import paginationFactory from 'react-bootstrap-table2-paginator';

const { SearchBar } = Search;

function actionsLink(cell, row) {
  return (
    <div>
            <div className="btn-group">
              <a
                href={"/skladiste/" + row.slug}
                className="btn btn-md btn-outline-success icon-btn borderless"
              >
                <i className="ion ion-md-search"></i>
              </a>          
              <button
                className="btn btn-outline-danger"
                onClick={() => this.onDeleteClick(row.slug)}
              >
                Delete
              </button>
            </div>
          </div>

  );
}

const columns =  [
    {
        dataField: "id",
        text: "ID"
    },
    {
        dataField: "storehouse_name",
        text: "Storehouse name"
    },
    {
        dataField: "available",
        text: "Available"
    },
    {
        dataField: "id",
        text: "Actions"
        formatter: actionsLink
    }
]

const StorehouseList = ({ storehouses, onDeleteClick }) => (
    <>
        <ToolkitProvider
        keyField="id"
        data={ storehouses } 
        columns={ columns } 
        search
        >
        {props => (
            <div>
                <SearchBar { ...props.searchProps } />
                <hr />
                <BootstrapTable
                    {...props.baseProps}
                    keyField="id"
                    bootstrap4
                    striped
                    hover
                    pagination={paginationFactory()}
                />
            </div>
            )
        }
        </ToolkitProvider>
    </>
);

StorehouseList.propTypes = {
  storehouses: PropTypes.array.isRequired,
  onDeleteClick: PropTypes.func.isRequired
};

export default StorehouseList;

Does anyone have a suggestion on how to solve this problem?

Answer 1

In actionsLink you cannot use this.onDeleteClick because it is only passed to StorehouseList.

It looks like react-bootstrap-table2-toolkit has the option to pass extra data to the formatter, so you can use this to pass onDeleteClick to your actionsLink by including it as extra data for your column formatter:

• https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columnformatextradata-any
• https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/column-props.html#columnformatter-function

Note that you'll need to define columns inside of StorehouseList in order to use the onDeleteClick that's passed to it:

const StorehouseList = ({ storehouses, onDeleteClick }) => {
    const columns =  [
        ...
        {
            dataField: "id",
            text: "Actions"
            formatter: actionsLink,
            formatExtraData: { onDeleteClick },
        }
    ];

    return (
        <ToolkitProvider
            ...
    )
]

Then in actionsLink use the fourth argument to get formatExtraData.onDeleteClick:

function actionsLink(cell, row, rowIndex, formatExtraData) {
    ...
        <button
            ...
            onClick={() => formatExtraData.onDeleteClick(row.slug)}
            ...
}