I don't understand why I am getting the value of dob as an object when in use react-datepicker

Question

when I console log the value of dob, its an object instead of a string

initial state

const initialValues = {
    registrationForm: {
     
        dob: {
            elementType: 'date',
            elementConfig: {
                name: 'dob',
                required: true,
                placeholderText: 'Date of birth'
            },
            value: null,
        },
    },
   
}

state*

const [values, setValues] = useState(initialValues);

updateObject

export const updateObject = (oldObject, updatedProperties) => {
    return {
        ...oldObject,
        ...updatedProperties
    };
};

handle change handler

  const handleChange = (event, inputIdentifier, config) => {
      
      
        const updatedRegistrationForm = updateObject(values.registrationForm, {
            [inputIdentifier]: updatedFormElement
        });

        setValues({registrationForm: updatedRegistrationForm);


    };

handle submit*

 const handleSubmit = (event) => {
        event.preventDefault()
        const formData = {};
        for (let formElementIdentifier in values.registrationForm) {
            formData[formElementIdentifier] = values.registrationForm[formElementIdentifier].value;
        }

        console.log(formData)
    };

for (let key in values.registrationForm) {
        formElementsArray.push({
            id: key,
            config: values.registrationForm[key]
        });
    }

form

                 <form  onSubmit={handleSubmit}>
                
             
                            {
                                formElementsArray.slice(sliceStart, sliceNumber).map(({config, id}) => {
                         
                                    return <Input
                                        key={id}
                                        elementType={config.elementType}
                                        elementConfig={config.elementConfig}
                                        value={config.value}
                                        changed={(event) => handleChange(event, id)}/>

                                })
                            }


                </form>

input

const Input = ({
                   elementType,
                   elementConfig,
                   value,
                   changed,
                 
               }) => {
    let inputElement = null;

    switch (elementType) { 
        case ('date'):
            inputElement =
                <DatePicker
                    id={id
                    className='mb-3 form-control'
                    {...elementConfig}
                    selected={value}
                    onChange={changed}/>
            break;
      
    }
    

    return (

        <>
            {inputElement}
        </>


    );
};

export default Input;

I was expecting something similar to this when I console log(Stringvale)

dob: "2023-01-11T21:00:00.000Z"

but I got this(an object)

Any help will be highly appreciated.

Answer 1

   <DatePicker
     id={id
     className='mb-3 form-control'
     {...elementConfig}
     selected={value}
     onChange={changed}/>

onChange in DatePicker returns a date object. You can use any date formatters to convert the date object to required format.

Update changed method to accept the date object, do the conversions like below.

const handleChange = (event, inputIdentifier, config) => {
  const updatedRegistrationForm = updateObject(values.registrationForm, 
    {
      [inputIdentifier]: updatedFormElement
    });

  if(inputIdentifier=="dob") {
    updatedFormElement.value=formatDate(date); //create some function to do the date formatting
  } else {
    updatedFormElement.value = event.target.value // for example
  // logic for non date inputs
  }

 setValues({registrationForm: updatedRegistrationForm);
};