How to convert a UTC date to "MM/DD/YYYY" for react-datepicker?

Question

I use react-datepicker in a component for updating posts. The date and other passed to the component from MongoDB through props.This is a simple fullstack-graphql application with a CRUD functionality. Maybe the problem is with correct date conversion. The format of the input date received through props is Unix Timestamp, like "1573227729064". The "datepicker" format should be "MM/DD/YYYY". I have read the docs and configure datepicker, but for some reason it doesn't render. Maybe someone can explain me, looking at the code below. Will be very grateful for any help!

import React, { Component } from 'react';
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { EditorState, getCurrentContent, getPlainText, ContentState } from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import '../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import { stateToHTML } from 'draft-js-export-html';
import gql from 'graphql-tag';
import { Mutation } from 'react-apollo';
import { stateFromHTML } from 'draft-js-import-html';

const updateMutation = gql`
  mutation UpdateHeroMutation($id: ID!, $title: String!, $description: String!, $date: String!) {
  updateHero(heroUpdate: {_id: $id, title: $title, description: $description, date: $date}) {
    _id
    title
    description
    date
  }
}
`;

class Hero extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: props.data.title,
      setDate: props.data.date,
      editorState: EditorState.createWithContent(stateFromHTML(props.data.description))
    };
  }
  onChange(e) {
    this.setState({ title: e.target.value })
  }
  onChangeSelect(published) {
    this.setState({ setDate: published })
  }
  onEditorStateChange = (editorState) => {
    this.setState({
      editorState
    });
  }
  render() {
    return (
      <>
        <h5>Edit post</h5>
        <div className="label-section">Name:</div>
        <h5>
          <input name="title" id="title" type="text" defaultValue={this.props.data.title} onChange={e => this.onChange(e)} />
        </h5>
        <br />
        <div className="label-section">Published:</div>
        <DatePicker
          id="published"
          name="published"
          defaultValue=""
          dateFormat="MM/DD/YYYY"
          selected={Date(this.state.setDate)}
          onChange={published => this.onChangeSelect(published)}
        />
        <h5>{this.state.setDate}</h5>
        <div className="label-section">Edit text:</div>
        <Editor
          editorState={this.state.editorState}
          wrapperClassName="demo-wrapper"
          editorClassName="demo-editor"
          onEditorStateChange={this.onEditorStateChange}
        />
        <input type="text" className="hidden" defaultValue={this.props.data._id} />
        <Mutation mutation={updateMutation} variables={{ id: this.props.data._id, title: this.state.title, description: stateToHTML(this.state.editorState.getCurrentContent()), date: this.state.setDate }}>
          {updateHero => (
            <button onClick={updateHero} type="submit">OK</button>
          )}
        </Mutation>
      </>
    );
  }
}

export default Hero;

Answer 1

You need to initialize the date in

this.state = {
  title: props.data.title,
  setDate: new Date(props.data.date),
  editorState: EditorState.createWithContent(stateFromHTML(props.data.description))
};

and

<DatePicker
      id="published"
      name="published"
      defaultValue=""
      dateFormat="MM/DD/YYYY"
      selected={this.state.setDate}
      onChange={this.onChangeSelect}
    />