The function is called twice because you are calling it twice in your render method.

1. 1st Call: On input: onChange() calls the ConvertDate() method and sets state. On setting state component re-renders
2. 2nd Call: Component re-renders and the ConvertDate() method is called when getting defaultValue

I would recommend storing the defaultValue in state and retrieving that value from state instead of calling a function in the render method.

You receive NaN-NaN-NaN because an invalid date is being passed to your function "ConvertDate". The reason might be that the date you receive from API is incorrect in some way. Try using momentjs for date handling and conversion, its relatively simple and you can avoid bugs

Edit: Javascript Date() constructor accepts these two formats "yyyy-mm-dd" or "mm-dd-yyyy".

console.log(new Date("2019-12-14")); // valid yyyy-mm-dd console.log(new Date("2019-14-12")); // invalid yyyy-dd-mm console.log(new Date("12-14-2019")); // valid mm-dd-yyyy console.log(new Date("14-12-2019")); // invalid dd-mm-yyyy

The function is called twice because you are calling it twice in your render method.

1. 1st Call: On input: onChange() calls the ConvertDate() method and sets state. On setting state component re-renders
2. 2nd Call: Component re-renders and the ConvertDate() method is called when getting defaultValue

I would recommend storing the defaultValue in state and retrieving that value from state instead of calling a function in the render method.

You receive NaN-NaN-NaN because an invalid date is being passed to your function "ConvertDate". The reason might be that the date you receive from API is incorrect in some way. Try using momentjs for date handling and conversion, its relatively simple and you can avoid bugs

Edit: 
Javascript Date() constructor accepts these two formats "yyyy-mm-dd" or "mm-dd-yyyy".

console.log(new Date("2019-12-14")); // valid yyyy-mm-dd console.log(new Date("2019-14-12")); // invalid yyyy-dd-mm console.log(new Date("12-14-2019")); // valid mm-dd-yyyy console.log(new Date("14-12-2019")); // invalid dd-mm-yyyy

Update:
MomentJS is not the recommended library for manipulating dates anymore, as it is outdated and there are much better and smaller alternatives available.

The function is called twice because you are calling it twice in your render method.

1. 1st Call: On input: onChange() calls the ConvertDate() method and sets state. On setting state component re-renders
2. 2nd Call: Component re-renders and the ConvertDate() method is called when getting defaultValue

I would recommend storing the defaultValue in state and retrieving that value from state instead of calling a function in the render method.

You receive NaN-NaN-NaN because an invalid date is being passed to your function "ConvertDate". The reason might be that the date you receive from API is incorrect in some way. Try using momentjs for date handling and conversion, its relatively simple and you can avoid bugs

The function is called twice because you are calling it twice in your render method.

1. 1st Call: On input: onChange() calls the ConvertDate() method and sets state. On setting state component re-renders
2. 2nd Call: Component re-renders and the ConvertDate() method is called when getting defaultValue

I would recommend storing the defaultValue in state and retrieving that value from state instead of calling a function in the render method.

You receive NaN-NaN-NaN because an invalid date is being passed to your function "ConvertDate". The reason might be that the date you receive from API is incorrect in some way. Try using momentjs for date handling and conversion, its relatively simple and you can avoid bugs

Edit: Javascript Date() constructor accepts these two formats "yyyy-mm-dd" or "mm-dd-yyyy".

console.log(new Date("2019-12-14")); // valid yyyy-mm-dd console.log(new Date("2019-14-12")); // invalid yyyy-dd-mm console.log(new Date("12-14-2019")); // valid mm-dd-yyyy console.log(new Date("14-12-2019")); // invalid dd-mm-yyyy