Build a component that books a one-way or round-trip flight for specified dates.
The <input type="date"> element would be helpful for the date input fields.
This question evaluates your knowledge of form validation and dependent form fields.
We can use <input type="date"> to render native datepickers, which has over 96% browser support globally at the time of writing. Native datepickers also come with the min attributes, which we can use for ensuring that only valid dates are chosen.
The input fields and buttons are also wrapped in a <form> so that we can leverage native form submission and validation. Submission can be trigged by clicking the "Book" button or hitting Enter on any of the form fields. The browser will first validate the inputs and trigger the submit event if the fields are valid.
Since we need to toggle the display of the return field, we will need a state value to track whether the selected flight is "One-way" or "Round-trip" to know whether to render the return date input.
The formatDate function converts a JavaScript Date object into a YYYY-MM-DD string which is the format expected by <input type="date">.
Using a form that constantly tracks the input values (controlled form) is more convenient than native forms approach (uncontrolled forms), as having state for the date values allows us to specify the current departure date as the min of the return date <input> field and leverage the browser's form validation during submission. Otherwise, we'll have to write custom validation logic in the submission handler.
Controlled forms are achieved in React by calling the state setter in the <input>'s onChange callback. This makes it straightforward to capture the current value of these elements directly in our component's state, and any state changes are instantly updated in the UI.