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 ing 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 ?

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 ing 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 ?

• javascript
• reactjs
• typescript
• bootstrap-4
• react-bootstrap

• you're using a functional ponent so you shouldn't be using 'this'. Try without that – 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 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 Commented Apr 14, 2022 at 0:20

2 Answers 2

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 ponent. (Install font awesome as a dependancy if you haven't already. Link to the documentation here: https://fontawesome./docs

For this specific icon, it's linked here: https://fontawesome./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 ponents 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 ponent loads.

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

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.