Hero search form onSubmit handle
Hero search form onSubmit handle
First of all you need a good knowledge of React and Typescript.
You can see the search-forms structured in the folder: app/(client-components)/(HeroSearchForm)/
_ ex with the StaySearchForm:app/(client-components)/(HeroSearchForm)/(stay-search-form)/StaySearchForm.tsx
You should store and process the values in this file: StaySearchForm.tsx
First you add onChange props for LocationInput, StayDatesRangeInput, and GuestsInput components(app/(client-components)/(HeroSearchForm)/LocationInput.tsx, ...)
Then, each time you customize the value, those components will call the onChange function and pass the value back to the parent component StaySearchForm.tsx
Especially in the GuestsInput component, you should add one more prop, onClickSubmit, which will catch when the submit button is clicked.
So you have all the data, and the onSubmit event, now you should save the data and a State variable in the component StaySearchForm.tsx,and when onClickSubmit works, you send those data to the server, or do something.
And the same goes for other forms: (car-search-form), (experiences-search-form), etc.
If you are not familiar with these treatments, you can learn first with simpler components like in this example: https://react.dev/reference/react-dom/components/input
Hope this helps.
Last updated