How to add delete trash icon to bootstrap table rows in React?-CodePudding

I have a table with some fields and I want to put a trash icon to each row and then delete that row when it is clicked. I have a problem on that row to show that icon and send customerId field of the corresponding row to the delete function.

I copied the trash icon from bootstrap site Here is the code:

import React, { useEffect, useState } from 'react';

import * as ReactBootStrap from 'react-bootstrap';
import * as service from '../service/FetchCustomerService';
import Button from 'react-bootstrap/Button'

function MainPanel() {

  const [customers, setCustomers] = useState([]);
  

  useEffect(() => {
    const fetchPostList = async () => {
      const response = await service.getCustomerList();
      setCustomers(response.data);
      console.log(response.data)
    };
    fetchPostList()
  }, []);



  const deleteCustomer = (customerId) => {
    // CALL DELETE FUNCTION WITH CUSTOMERID
    console.log(customerId);
  }

  return (
    <ReactBootStrap.Table striped bordered hover>
        <thead>
          <tr>
            <th>ID</th>
            <th>FirstName</th>
            <th>LastName</th>
            <th>Delete</th>
          </tr>
        </thead>
        <tbody>
          {customers &&
            customers.map((item) => (
              <tr key={item.id}>
                <td>{item.id}</td>
                <td>{item.firstName}</td>
                <td>{item.lastName}</td>
//problem is the following line
                    <td><Button onClick={this.deleteCustomer(this.customerId)} className='bi-trash'>Delete</Button></td>
                  </tr>
                ))}
            </tbody>
          </ReactBootStrap.Table>
      );
    }
    
    export default MainPanel;

But with this, only button is coming without an icon and I cannot pass the customerId to the function, error is:

MainPanel.js:45 Uncaught TypeError: Cannot read properties of undefined (reading 'deleteCustomer')

How can I solve that ?

CodePudding user response：

You don't want to use this.deleteCustomer as you are using a functional component.

You want to use

<Button onClick={() => deleteCustomer(customerId)}></Button>

If you just pass deleteCustomer(customerId) it will probably trigger the function on load. If you pass a callback like above, it should work as intended.

CodePudding user response：

It's not working because the font-awesome library requires you to make the icon with an i tag. You are applying the classname to a button element which will not work. Below is what it should be.

For example:

<i ></i>

Once you have the icon on the page, you can wrap the i tag with your button:

<Button onClick={this.deleteCustomer(this.customerId)}>
     <i ></i>
</Button>

This example directly above will work, but since you are using react you should use the FontAwesomeIcon component. (Install font awesome as a dependancy if you haven't already. Link to the documentation here: https://fontawesome.com/docs

For this specific icon, it's linked here: https://fontawesome.com/icons/trash?s=solid

Imports:

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faTrash } from "@fortawesome/free-solid-svg-icons";

Full Button:

<Button onClick={this.deleteCustomer(this.customerId)}>
    <FontAwesomeIcon icon={faTrash} />
</Button>

Now as to why it says it can't read this undefined property. You need to remove the this. at the beginning of the references to the function, that's for class based components and this is functional. So with this correction:

<Button onClick={() => deleteCustomer(this.customerId)}>
    <FontAwesomeIcon icon={faTrash} />
</Button>

The reason for the () => at the beginning is that if you don't include it React will treat it as onl oad and run it once when the component loads.