this is my first project in React. I've got this element <DragDropContext onDragEnd={(result) => this.HandleOnDragEnd(result)}>and after pleting the drag it calls the following function where I get the error:

    HandleOnDragEnd = (result) =>
    {
        const requestOptions = {
            method: 'POST',
            headers: { "Content-type":"application/json",
                       "Accept":"application/json",
                       "Accept-Encoding":"gzip, deflate, br" }
        };
        fetch(url, requestOptions)
            .then(function(response){
                if(!response.ok)
                {
                    return response.statusText;
                }
                else{
                    const items = [...this.state.sets];
                    const itemReordered = items.splice(result.source.index, 1);
                    items.splice(result.destination.index, 0, itemReordered);
                    this.setState({sets: items});
                }
            })
    }

The issue happens within the else statement. For some reason it thinks that this.state is undefined. So far everywhere I've checked it just says to either bind this with the function within the constructor or to use an arrow function which I have, so I don't understand what's causing this issue.

UPDATE 1

I'm able to console.log(this.state.sets); at the start of the function so my only assumption would be that it's not defined within the .then function for some reason. Is there a way around it?

this is my first project in React. I've got this element <DragDropContext onDragEnd={(result) => this.HandleOnDragEnd(result)}>and after pleting the drag it calls the following function where I get the error:

    HandleOnDragEnd = (result) =>
    {
        const requestOptions = {
            method: 'POST',
            headers: { "Content-type":"application/json",
                       "Accept":"application/json",
                       "Accept-Encoding":"gzip, deflate, br" }
        };
        fetch(url, requestOptions)
            .then(function(response){
                if(!response.ok)
                {
                    return response.statusText;
                }
                else{
                    const items = [...this.state.sets];
                    const itemReordered = items.splice(result.source.index, 1);
                    items.splice(result.destination.index, 0, itemReordered);
                    this.setState({sets: items});
                }
            })
    }

The issue happens within the else statement. For some reason it thinks that this.state is undefined. So far everywhere I've checked it just says to either bind this with the function within the constructor or to use an arrow function which I have, so I don't understand what's causing this issue.

UPDATE 1

I'm able to console.log(this.state.sets); at the start of the function so my only assumption would be that it's not defined within the .then function for some reason. Is there a way around it?

• javascript
• reactjs

Share Improve this question Follow asked Jul 21, 2022 at 13:59 ManibManib 18111 gold badge33 silver badges1919 bronze badges 1

• You used an arrow function for handleOnDrageEnd, but the promise handler is a plain function. – Dave Newton Commented Jul 21, 2022 at 14:17

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 3

The problem is that you are using function(){} instead of arrow function (() => {}).

This way the function is not inheriting the this from your class ponent, so this is undefined.

You can read more about arrow function and this here on MDN .

---

Convert your function(){} into an arrow function () => {}
or
.bind() your function using this as param (like function(){}.bind(this))
in order to solve the problem.