在反应日期选择器上使用钩子

Question

I'm created a contact form that sends the data to an email and I want to be able to use the react date picker. I've successfully managed to get all other input fields to save in the state and send using NodeMailer however the date doesn't have a name assigned to it, like the other (example: fullName) so I'm not sure how to add it on so I can easily retract in the backend like I'm doing for the other fields (req.body.fullName). Appreciate any help:)

  const [startDate, setStartDate] = useState(new Date());

  <DatePicker
    selected={startDate}
    onChange={(date) => setStartDate(date)}
    inline
   />

Answer 1

You are probably checking the states using React Browser Extension.
There you will see something like this:

State: xyz
State: abc

It doesn't display the name of the state only shows the value. Say you initialized two states:

const [a, setA] = useState(1);
const [b, setB] = useState({'var1': 'val1', 'var2':'val2'});

Using React extension you can see:

State: 1
State: {'var1': 'val1', 'var2':'val2'}

But these both have the name associated with it a and b respectively. You can access these by their names only. So, here your state name is startDate . Try:

console.log(startDate)

Your date will be printed. And send it in the body of the API call. And you can access it on the backend using req.body.startDate .