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

Are you getting any errors from the `deleteMovie` function? And can you upload the function as well? — PeterSH, Jul 31 '20 at 08:46

score 0 · Accepted Answer · answered Jul 31 '20 at 08:52

0

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!

answered Jul 31 '20 at 08:52

Edson Magombe

313
2
14

{ e.persist(); console.log(row.movieId); }} > delete – Edson Magombe Jul 31 '20 at 09:07
Just edited your sendbox https://codesandbox.io/s/happy-moon-fqnfd?file=/src/components/MovieTable.js – Edson Magombe Jul 31 '20 at 09:11

score 0 · Answer 2 · answered Jul 31 '20 at 09:10

The selector data.movieId is not valid, the data variable is an object containing an array. Select the movieId like this:

{
    dataField: "movieId",
    formatter: (rowContent, row) => {
        return (
          <button onClick={() => deleteMovie(data[0].movieId)}>delete</button>
        );
    }
}

adding a delete button

2 Answers2