adding a delete button

Question

I created a search app where users can search movies and it will be shown in the table. However, I want a delete button in the last column in each movie row to delete a movie from the table. I'm being unable to do that. Can someone help me as to how to add that delete button in the last column? I've already created the deleteMovie action and reducers. I'm just not sure how to add it to the table. I tried to do as they told in the docs but it isn't working for me

import React from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { deleteMovie } from "../action/movieActions";
import "react-bootstrap-table-next/dist/react-bootstrap-table2.min.css";
import BootstrapTable from "react-bootstrap-table-next";
const MovieTable = ({ data, deleteMovie }) => {
  console.log(data);
  const columns = [
    {
      dataField: "movieId",
      text: "ID",
      sort: true
    },
    {
      dataField: "name",
      text: "Name",
      sort: true
    },
    {
      dataField: "year",
      text: "Year",
      sort: true
    },
    {
      dataField: "Delete",
      title: "delete",
      text: "Delete",
       events: {
        onClick: () => deleteMovie(data.movieId)//tried this but didn't work
     }
    }
  ]
  return (
    <div className="col m4">
      <BootstrapTable keyField="id" data={data} columns={columns} />
    </div>
  );
};

MovieTable.propTypes = {
  deleteMovie: PropTypes.func.isRequired
};

export default connect(
  null,
  { deleteMovie }
)(MovieTable);

Answer 1

That way you are adding click event on column.

First you have to create a hook or a component that returns a button (The delete button) and then pass as parameter to that hook or component the id of the product.

The hook/component you will create has to be called on the data array!