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.