How convert date properly in ReactJS frontend side - reactjs

Question

My API return some array of objects with LocalDate string and when I get it in my frontend side I want to convert it from state to JS Date object with timezone.
I tried to do it in componentDidMount() function after fetching API data but after setting state react developer tool shows me that dateList state is udentified.
DateComponent
class DateComponent extends Component {
constructor(props) {
super(props);
this.state = {
dateList: [],
id: this.props.id,
}
}
componentDidMount() {
DateService.retrieveProfile(this.state.id)
.then(response => {
this.setState({
dateList:this.convertDatesToTimezoneUTC(response.data.dateList)
})
})
}
convertDatesToTimezoneUTC(dateList) {
dateList.map((value) => (
value.date = new Date(value.date),
)
);
}
render() {
let {dateList, id} = this.state;
return (
<div>
<Formik
enableReinitialize
initialValues={{dateList}}>
<FieldArray name="dateList"
render={() => (
<div>
{dateList.map((value, index) => (
<div className={"m-3 form-row"} id={value.id} key={index}>
<Field className="form-control col-md-2 mr-2" type="text"
name={`dateList[${index}].date`} readOnly/>
</Formik>)
}
</div>
)
}
}
export default DateComponent;
Model
dateList[{
id:"some id"
date:"2019-08-16"
}]
Without convert convertDatesToTimezoneUTC() function everything is alright and return data properly. Did I miss something ?

Answer 1

I guess you forgot to return from the convertDatesToTimezoneUTC():
convertDatesToTimezoneUTC(dateList) {
return dateList.map((value) => (
value.date = new Date(value.date),
));
}

Answer 2

You need to return your newly computed array from convertDatesToTimezoneUTC function, also you need to only change the date and keep rest of the object properties as it is,
convertDatesToTimezoneUTC = (dateList) => {
return dateList.map((value) => ({
...value,
date : new Date(value.date),
})
)
}