Invalid Date in edit form on birthday field using React JS and moment

Question

I'm using an API to create and recover the data in React JS, but I can't edit the birthday field. When I use the backspace on the keyboard, show the message on the field: "Invalid date" . I'm using moment to convert (JavaScript built-in JSON object) from the API with MongoDB, to the default DD/MM/YYYY . It's showing me correctly, but I got this problem when I need to edit.

//importing moment and Brazilian format

    import * as moment from 'moment'
    import 'moment/locale/pt-br'

//creating component and constructor

    export default class Member extends Component {
        constructor(props){ 
            super(props)
            this.stateHandlerName = this.stateHandlerName.bind(this)
            this.stateHandlerDtbirth = this.stateHandlerDtbirth.bind(this)

    ...

//declaring state in object currentMember

    this.state = {
            currentMember: {
                id: null,
                name: "",                
                dtbirth: new Date(),
    ...

//vinculing the state to the field

    stateHandlerDtbirth(e) {
        const dtbirth = e.target.value
        this.setState(prevState => ({
            currentMember: {
                ...prevState.currentMember,
                dtbirth: dtbirth
            }
        }))
    }
    ...

//Edit

    editMember() {
            MemberDataService.edit(
                this.state.currentMember.id,
                this.state.currentMember
            )
                .then(response => {
                    console.log(response.data)
                    this.setState({
                        message: "Member was edited successfully"
                    })
                })
                .catch(e => {
                    console.log(e)
                })
        }    
    ...

//Reindering page

    render() {
    const { currentMember } = this.state

    return (
        <div>
            { currentMember ? (
                <div className="edit-form">
                    <h4>Member</h4>
                    <form>
                       <div className="form-group">
                            <label htmlFor="name">Name</label>
                            <input type="text" 
                                   className="form-control" 
                                   id="name" 
                                   value={currentMember.name} 
                                   onChange={this.stateHandlerName} />
                        </div>    

                        <div className="form-group">
                            <label htmlFor="dtbirth">Birth date</label>
                            <input 
                                type="text" 
                                className="form-control" 
                                id="dtbirth" 
                                value={moment(currentMember.dtbirth).format('L')} 
                                onChange={this.stateHandlerDtbirth} />

                        </div>

Answer 1

I would keep input and evaluated date from input as a separate things.

Otherwise

When I use the backspace on keyboard, show the message on field: "Invalid date".

It is very easy to make typo in date field. Also it doesnt make sense to expect valid date when user is still typing.

Take a look at the example.

I know there is large scope for improvement here

 class Input extends React.Component { constructor() { super(); this.state = { dateValue: '', dateValueProcessed: null } this.handleEditInput = this.handleEditInput.bind(this); } handleEditInput({ target: { value } }) { this.setState({ dateValue: value, dateValueProcessed: moment(value, "DD/MM/YYYY") }) } render() { return React.createElement('div', null, [React.createElement('input', { type: "text", value: this.state.dateValue, onChange: this.handleEditInput }, null), React.createElement('div', null, JSON.stringify(this.state)) ]) } } ReactDOM.render( React.createElement(Input, { }, null), document.getElementById("root"))

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.min.js"></script> <div id="root"></div>