React input[type=date] component does not work properly

Question

I am building a react-based electron application and stumbled across a problem with date fields.

When using an input field with type='date' the onChange event is not fired. Additionally it seems I can not enter a full date, as soon as i modify the third component of the date it resets.

So the default state (the rendered input field, the state in react for the value is "") is tt.mm.jjjj (german) which translaes to mm/dd/yyyy i think. I can focus the field and enter 01 > 01, then it states: 01.01.jjjj. As soon as i type one number for the year everything gets reverted to tt.mm.jjjj

I created an empty html file with an input[type=date] element and it works in chromium, so it seems to be the react-component, that is buggy.

My component looks like:

<input
    type="date"
    className="input-group-field"
    name="birthdate"
    id="birthdate"
    value={this.state.birthDate}
    onChange={event => this.setState({birthdate: event.target.value})}
/>

• Electron = 1.7.8
• Chromium = 7.9.0
• React = 15.6.2

Any idea on how to fix this?

Answer 1

this.state.birthDate and this.setState({birthdate: event.target.value}) wrong.

setState is case-sensitive. try:

this.setState({birthDate: event.target.value})