Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

123
Views
How to update lists after delete a category

I want to update the Category list after delete a category, I used custom hook for fetching data from the server. I'm not sure how to update state on custom fetch hook

const {data, error, loading} = useFetch("/api/admin/category");
    const [category, setCategory]= useState([]);

    useEffect(() => {
        setCategory(data)
    },[])

    const deleteHandler = (id) => {

        const deleteRequest = async () => {
            const data = await axios.delete(`/api/admin/category/${id}`);
            return data;
        }

        deleteRequest()
            .then(res => {
                data.filter((item) => {
                    return id !== item.id;
                })
            })
    }

about 4 years ago · Juan Pablo Isaza
3 answers
Answer question

0

Adding data as the dependency to the useEffect hook may help, try this,

    const {data, error, loading} = useFetch("/api/admin/category");
    const [category, setCategory]= useState([]);

    useEffect(() => {
        setCategory(data)
    },[data])

    const deleteHandler = (id) => {

        const deleteRequest = async () => {
            const data = await axios.delete(`/api/admin/category/${id}`);
            return data;
        }

        deleteRequest()
            .then(res => {
                data.filter((item) => {
                    return id !== item.id;
                })
            })
    }
about 4 years ago · Juan Pablo Isaza Report

0

could you add you're custom hook to the code provided? and also be a bit more specific with your query?

import {useEffect, useState} from "react";
import axios from "axios";

const useFetch = (url) => {

    const [data, setData,isLoading] = useState([]);
    const [error, setError] = useState([]);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        request_get()
        .then(res => {
            if (res.request.status === 200) {
                setTimeout(() => {
                    setLoading(false)
                    setData(res.data.data)
                },1000)
            }
        })

        return () => {
            setData([]);
        }
    }, [])

    const request_get = async () => {
        const data = await axios.get(url)
        return data;
    }

    return {data: data, error: error, loading:loading}

}

export default useFetch;

enter image description here

about 4 years ago · Juan Pablo Isaza Report

0

in your custom hook add data to your dependency array;

in your component instead of the folowing

useEffect(() => {
  setCategory(data)
},[])

try to use the spread operator

useEffect(() => {
  setCategory([...data])
},[data])
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!