Re-Calling a react hook after a function is executed

Question

I am new to react hooks and I have a hook function which receives a series of data from an API to be shown in a list:

function useJobs () {
  const [jobs, setJob         


        

Answer 1

Your DeleteJobs function also needs to delete the job value from state as your data from server is only fetched on initial render. For that you can expose a method from custom hook and use it when calling DeleteJobs

function useJobs () {
  const [jobs, setJobs] = React.useState([])
  const [locations, setLocations] = React.useState({})
  const [departments, setDepartments] = React.useState({})
  const [tags, setTags] = React.useState({})

  const deleteJob = (id) => { // function that removes job from state
      setJobs(prevJobs => prevJobs.filter(job => job.id !== id));
  }
  React.useEffect(() => {
    fetchJSON('/api/jobs/list-jobs', { headers: headers })
      .then(setJobs)
  }, [])

  ....
  return [jobs, locations, departments, tags,deleteJob]
}


function DeleteJob (jobid) {
  console.log('deletejob fired')
  console.log(jobid)
  axios({
    method: 'delete',
    url: '/api/jobs/delete-job/' + jobid,
    headers: headers
  })
}

export default function Jobs () {
  const classes = useStyles()
  const [jobs, locations, departments, tags, deleteJob] = useJobs()
  return (
      ...
      {jobs.map(job => (
      ......
       <IconButton 
          aria-label='delete'
          style={{ color: 'red' }} 
          variant='outlined' 
          onClick={() => { 
              DeleteJob(job.id); 
              deleteJob(job.id); // locally delete from state
          }}
       >
           <DeleteIcon />
       </IconButton>

      ...
  )
}