How to add constructor to a functional component in React?

Question

I created a functional component in which i get data from Django REST and I want to manage deleting items. When I write a proper function I get the error

Cannot read property 'deleteItem' of undefined

I guess it is because I don't have a constructor here, am I right?

This is my function:

  function deleteItem(id) {
    axios.delete('http://127.0.0.1:8000/api/products' + `/${id}/`);
};

And I want to use it here:

<Button variant="dark" onClick={()=>this.deleteItem(product.id)} >Delete</Button>

there's no `this` in function components. Perhaps you meant to do `onClick={() => deleteItem(product.id)}`? — Nicholas Tower, Jul 04 '21 at 13:43

score 2 · Answer 1 · answered Jul 04 '21 at 13:47

if it's a functional component then you don't have this. You can achieve what you want in a functional component like this

function myComponent(){

  const deleteItem = (id) => {
    axios.delete('http://127.0.0.1:8000/api/products' + `/${id}/`);
  };

  return <Button variant="dark" onClick={()=> () => deleteItem(product.id)} >Delete</Button>
}

Tushar Shahi · Answer 2 · 2021-07-04T14:38:10.663

2

In functions, this depends on how the method is executed. Yours is a function that runs like this:

App()

There is no object on which this method is run.

When not found this belongs to the global object/window(in case of browsers). Thing to note is that react runs in strict mode. So this is undefined.

You could simply use deleteMethod().

edited Jul 04 '21 at 14:38

answered Jul 04 '21 at 13:57

Tushar Shahi

16,452
1
18
39

score 0 · Answer 3 · answered Jul 04 '21 at 13:46

0

Constructor is a class concept, constructor is a method called when a class is instantiated. Thus functions have no constructors only classes do

answered Jul 04 '21 at 13:46

Darshan Dhabale

1
1

score 0 · Accepted Answer · answered Jul 04 '21 at 14:01

concept of this refers to a pointer to methods and attributes in class components that you can access them by that, so you are not capable of use that in functional components , you are able to try followings this:

const MyComponent = (props) => {

    //...

    function deleteItem(id) {
        axios.delete('http://127.0.0.1:8000/api/products' + `/${id}/`);
    };

    return <Button variant="dark" onClick={()=> deleteItem(product.id)} >Delete</Button>
};

score 0 · Answer 5 · edited Jul 04 '21 at 14:28

0

Try this

<button variant="dark" onClick={()=>deleteItem(product.id)} >Delete</button>

edited Jul 04 '21 at 14:28

Yatrix

13,361
16
48
78

answered Jul 04 '21 at 14:08

Sumit Pathak

86
1
2

1

It's good to explain your answer. – Yatrix Jul 04 '21 at 14:28

How to add constructor to a functional component in React?

5 Answers5