I’m currently working on a form that allows users to search for bills by their description, ID, or price. However, I’ve encountered an issue: after the initial search, I have to submit the form twice to get the desired results.
getBillsByIdDescriptionPrice(formState.search)
is a function that brings from de DB all the bills
that match with the content from the input formState.search
The first search usually works fine. However, upon the second search, after submitting the query, it initially returns all the data instead of the specific result I’m looking for. Only after submitting the form again does it finally bring up the correct data.
Doing console logs, I noticed that during the second search, it briefly returns the correct result. However, shortly after, it reverts to displaying all the data, requiring an additional submission.
I hope someone can help me. Thanks a lot!
React with Typescript and Material UI
Link to the repo: https://github.com/guidomora/facturacion-front/blob/main/src/billing/components/BillingSearch.tsx
Here you can check the code:
const { bills, getBillsByIdDescriptionPrice } = useContext(DataContext)
const { formState, inputChange, search } = useFormSearch({ search: '' })
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault()
if (formState.search === '') return
getBillsByIdDescriptionPrice(formState.search)
}
const submitButton = () => {
if (formState.search === '') return
getBillsByIdDescriptionPrice(formState.search)
}
{/* displayed data */}
{(bills.length === 0) ? <Typography variant='h5'
sx={{ textAlign: 'center', color: 'black', fontWeight: 600, mt: 35 }}>
No bills found...
</Typography> :
<BillingTable bills={bills} />
}