state undefined inside async function ( Cannot read property 'filter' of undefined ) - react js

Question

My code is straight forward and it looks like I am using list as the local state and have updated it once data are fetched, the list is perfectly loading on the tbody but still is undefined inside handleDelete

const [list, setList] = useState([]);

useEffect(async () => {
    fetchData();
}, []);

 async function fetchData() {
    const { data } = await supplier.listSupplier();
    setList(data.data);
}

const confirmDelete = (id) => {
    alertify.confirm(() => {
        handleDelete(id);
    });
};

const handleDelete = async (id) => {
    console.log("list>>", list); //returning undefined
    const originalList = list;
    const list = list.filter((r) => r.id !== id); // throwing Cannot read property 'filter' of undefined
    setState(list);
    try {
        await supplier.deleteSupplier(id);
        alertify.success("Successfully Deleted");
    } catch (ex) {
        if (ex.response && ex.response.status === 404) {
            toastify.error("Already Deleted.");
        }
        setState(originalList);
    }
};

return(
    
     <tbody>
        {list &&
            list.map((row, i) => (
                <tr key={row.id}>
                    <td>
                            <button
                                className="btn btn-danger btn-xs"
                                title="Delete"
                                onClick={() => confirmDelete(row.id)}
                            >
                                <i className="fas fa-trash"></i>
                            </button>
                    </td>
                </tr>
            ))}
    </tbody>

)

Here, on handleDelete() its throwing error throwing Cannot read property 'filter' of undefined and its obvious that list seems to be undefined down there. How could I fix this?

It would help to see what `list` is. It probably doesn’t help that you’re defining a new one after logging and using it. Hoisting is real. — Dave Newton, May 12 '21 at 03:37
could you guys pelase check the question, I have updated it. — Aayush Dahal, May 12 '21 at 03:50
@DaveNewton coudl you check the question, I have updated the code block — Aayush Dahal, May 12 '21 at 04:44
@CyroDubeux could you take a look, I have updated the questions — Aayush Dahal, May 12 '21 at 10:16
You're destructuring data here `const { data } = await supplier.listSupplier();` and then you're doing `setList(data.data);` . I think `setList(data)` should do, since you already destrctured the data property from the original object. — Siddhant Varma, May 12 '21 at 10:46
@SiddhantVarma could you help me on this as well? https://stackoverflow.com/questions/67498940/input-field-losing-focus-on-each-character-type-react I will give try to this. — Aayush Dahal, May 12 '21 at 11:00
@AayushDahal Your `handleDelete` function defines its own `list` variable. This shadows your component's `list` state variable. You may want to search the web for "js variable hoisting" as well. — Dave Newton, May 12 '21 at 12:50

score 0 · Answer 1 · answered May 12 '21 at 11:01

looks like a naming issue. PLease check the comment inside the code.

const handleDelete = async (id) => {
    const originalList = list;

//here i don't suggest updating list on this way
//as list is the state and setState is the way to go
//next thing I have changed is that I created newList instead of list again
    const newList = originalList.filter((r) => r.id !== id); 
    //also it looks like you have named setList while defining the state
    setList(newList);
    try {
        await supplier.deleteSupplier(id);
        alertify.success("Successfully Deleted");
    } catch (ex) {
        if (ex.response && ex.response.status === 404) {
            toastify.error("Already Deleted.");
        }
        setList(originalList);
    }
};

state undefined inside async function ( Cannot read property 'filter' of undefined ) - react js

1 Answers1