ideas to use useAsync hook inside submit function - reactjs

Question

I've imported useAsync(hook from 'react-async') and I'm trying to use it after the client submits the form to send a post request.
Now, I'm getting an error that I can't use hooks inside functions based on the rules of hooks.
how can solve it? so that I'll be able to use useAsync after the client submits the form.
handleSubmit is my onSubmit function.
Here's my code :
import { Modal } from 'react-bootstrap';
import "react-datepicker/dist/react-datepicker.css";
import DatePicker from 'react-datepicker'
import { useState } from 'react';
import { useAsync } from 'react-async';
import useFetch from '../../hooks/useFetch'
import { useLocation } from 'react-router-dom';
const TodoPopup = (props : {show : boolean, onHide : () => void, title : string, values?
: {title : string, expirationDate : any, description : string}}) => {
const [name, setName] = useState(props.values?.title || '');
const [date, setDate] = useState(props.values?.expirationDate || '');
const [description, setDescription] = useState(props.values?.description || '');
const url = useLocation().pathname;
const handleSubmit = (e : React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
// const fetchRelevant = useFetch.apply(this,
// (props.values? [url, 'PUT', {name, date, description}] : [url, 'POST',{name,date, description}]));
const fetchRelevant = useFetch.apply(this, [url, props.values? 'PUT' : 'POST',
{name, date, description}]);
const { data, error, isPending} = useAsync({promiseFn : () => {
return fetchRelevant;
}})
if(isPending) console.log('loading...');
if(error) console.log('error');
if(data) props.onHide();
}
return (
<Modal {...props} centered>
<Modal.Header closeButton>
<Modal.Title>{props.title}</Modal.Title>
</Modal.Header>
<form onSubmit={(e) => handleSubmit(e)}>
<Modal.Body>
<div className = "form-group">
<label>Task Name</label>
<input type="text" className = "form-control" value = {name} onChange = {(e) =>
setName(e.target.value)} required />
</div>
<div className = "form-group">
<label>Expired</label>
<DatePicker selected={date} onChange={e => setDate(e)} className="form-control"
minDate={new Date()} required />
</div>
<div className = "form-group">
<label>Description</label>
<textarea rows = {5} className = "form-control" value = {description} onChange =
{(e) => setDescription(e.target.value)}></textarea>
</div>
</Modal.Body>
<Modal.Footer>
<button className="btn btn-primary" type="submit">Save changes</button>
</Modal.Footer>
</form>
</Modal>
);
};
export default TodoPopup;
*Note - I've tried to name the onSubmit function with an uppercase letter but it caused a runtime error.

Answer 1

There is a function exposed by useFetch called run , you can call it like so :
import React, { useState } from "react"
import { useFetch } from "react-async"
const TodoPopup = (props) => {
const { isPending, error, run } = useFetch("URL", { method: "POST" })
const [name, setName] = useState(props.values?.title || '');
const [date, setDate] = useState(props.values?.expirationDate || '');
const [description, setDescription] = useState(props.values?.description || '');
const handleSubmit = e => {
e.preventDefault()
run({ body: JSON.stringify({name, date, description}) })
}
return (
<form onSubmit={handleSubmit}>
...
</form>
)
}
export default TodoPopup;