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

Question

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 ?

you're using a functional component so you shouldn't be using 'this'. Try without that — Gianluca Fuoco
– Gianluca Fuoco, Commented Apr 14, 2022 at 0:10
then it prints all id's to the console for all elements at startup and doing nothing when I click to button — Chris Garsonn
– Chris Garsonn, Commented Apr 14, 2022 at 0:16
since you are calling the deleteCustomer function with an argument, you might have to pass in an anonymous function to call it like () => deleteCustomer(customerId) — Gianluca Fuoco
– Gianluca Fuoco, Commented Apr 14, 2022 at 0:20

Frank Edwards · Accepted Answer · 2022-04-14 00:30:08Z

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 class="bi-trash"></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 class="bi-trash"></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 onload and run it once when the component loads.

cSharp · Accepted Answer · 2022-04-14 00:19:49Z

2

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.

answered Apr 14, 2022 at 0:19

cSharp

3,1891 gold badge10 silver badges28 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related