Form State

1import { Timepicker } from "timepicker-ui-react";
2import { useState } from "react";
3
4function App() {
5  const [formData, setFormData] = useState({
6    name: "",
7    startTime: "9:00 AM",
8    endTime: "5:00 PM",
9    notes: ""
10  });
11
12  return (
13    <form onSubmit={(e) => {
14      e.preventDefault();
15      console.log(formData);
16    }}>
17      <input
18        value={formData.name}
19        onChange={(e) => 
20          setFormData({ ...formData, name: e.target.value })
21        }
22      />
23
24      <Timepicker
25        value={formData.startTime}
26        onUpdate={(data) => {
27          setFormData({
28            ...formData,
29            startTime: `${data.hour}:${data.minutes} ${data.type}`
30          });
31        }}
32      />
33
34      <Timepicker
35        value={formData.endTime}
36        onUpdate={(data) => {
37          setFormData({
38            ...formData,
39            endTime: `${data.hour}:${data.minutes} ${data.type}`
40          });
41        }}
42      />
43
44      <button type="submit">Submit</button>
45    </form>
46  );
47}