React - I can't pass my datepicker value as an argument because it's an object and I can't seem to convert it into a string

Question

I'm building a to-do list app, and one of the fields is date.

Below is where I am setting Selected Date

        <div>
            <label>Select Date</label>
            <Datepicker 
                selected={selectedDate} 
                onChange={(date) => setSelectedDate(date)}
                placeholder='Select Date' 
                minDate={new Date()}
                isClearable 
                showYearDropdown
                scrollableYearDropdown  
            />
        </div>

I'm trying to pass it into an onAdd function

    onAdd({ text, selectedDate , reminder })

However, I get an error - "Objects are not valid as a React child" because selectedDate is an object, and I need to pass in a string.

But whenever I try to convert it into a string, I'm blocked from doing so - e.g. I can't do this:

    onAdd({ text, selectedDate.toLocaleDateString() , reminder })

The fullstop is highlighted and the error says that ',' expected.

Could anybody help me out?

The onAdd function above ladders into this, but it seems like the error happens in the step above.

const addTask = (task) => {
  const id = Math.floor(Math.random()*10000)+1
  const newTask = {id, ...task }
    setTasks([...tasks, newTask])
}

Answer 1

onAdd({ text, selectedDate.toLocaleDateString() , reminder }) the input of this function is an object. You are using the short-hand syntax so the call is actually onAdd({ text:text, selectedDate.toLocaleDateString() , reminder:reminder }) . Now what's the key of your 2nd property? Nothing. That's why it's complaining. Try giving a name like onAdd({ text, selectedDate:selectedDate.toLocaleDateString() , reminder })