how to access to a function inside a class component from another function?

Question

I'm new in React and I'm trying to write an app working with an API. The code is more extensive so I cut the problem part and put here, I don't know if this is even possible to do, so if someone knows how to do it will be a BIG help.

-Explanation.
When I call deleteProduct() which I pass by props to the external function listTemplate.js, the inside getProducts() gives me this error:

Unhandled Rejection (TypeError): this.getproducts is not a function

export default class test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      products: [],
    };
  }
  async componentDidMount() {
    this.getproductos();
  }

  async getproducts() {
    const res = await axios.get("http://localhost:5000/api/productos");
    this.setState({ products: res.data });
    //Set in products info like {products:[name: 'shoes', model:'XXL', price:'90' ]}.
  }

  async deleteProduct(id) {
    await axios.delete("http://localhost:5000/api/productos/" + id); //Delete selected product.
    this.getproductos(); //get actualized products array.
  }

  render() {
    const { products } = this.state;
    return (
      <div className="col-md-6">
        <ListTemplate products={products} delBtn={this.deleteProduct} /> //here i pass through listTemplate deleteProduct() function.
      </div>
    );
  }
}



/******************************************************************************/

In another .js file I have this:

export default function ListTemplate(props) {
  const { products } = props.product;
  return (
    <div className="container">
      <div className="header">
        <h2>Product List:</h2>
      </div>
      {products.map((product) => (
        <div class="body" key={product._id}>
          <span>{product.name}</span>
          <span>{product.model}</span>
          <span>${product.price}</span>
          <button
            type="button"
            class="btn btn-danger btn-sm"
            onClick={(e) => {
              props.delBtn(product._id);
            }}
          >
            Delete Item
          </button>
        </div>
      ))}
    </div>
  );
}

My problem is when deleteProduct() finishes and tries to getProduct(). Explode.

Answer 1

Try to create an arrow method like

deleteProduct = async (id) => {
    ...
}