ComponentWithUsePost.tsx

type People = {
  name: string
}

const ComponentWithUsePost = ({id}) => {
  const [name, setName] = useState('')
  const {data, isLoading: isFetchingUser} = useFetch<User>({url: `/api/user/${id}`})
  const { doPost, isLoading, hasError, errorMessage } = usePost<User>({
    method: 'put',
    url: '/api/user/',
  })
  
  useEffect(() => {
    if (!data) return
    setName(data.name)
  }, [data])
  
  if (isLoading) {
    return <Loader />  
  }
  const onClickButton = () => {
    doPost({
      params: {
        name
      },
      onSuccess: (user) => {
        console.log(`update ${user.name}  success!`)
        history.push(`/people/${user.id}`)
      },
      onError: (err) => {
        console.log(err.message)
      }
    })
  }
  return (
    <>
      <input value={name} onChange={e => setName(e.target.value)} />
      {hasError && <b>{errorMessage}</b>}
      <button onClick={onClickButton}>edit user name</button>
    </>
  )
}