Multiple SingleDatePicker on the same form not working

When I put two SingleDatePicker in a form, only one picker is working.

<SingleDatePicker date={this.state.date2} onDateChange={date2 => this.setState({ date2 })} focused={this.state.focused2} onFocusChange={({ focused2 }) => this.setState({ focused2 })} />

<SingleDatePicker date={this.state.date} onDateChange={date => this.setState({ date })} focused={this.state.focused} onFocusChange={({ focused }) => this.setState({ focused })} placeholder="DATE OF BIRTH" required showDefaultInputIcon numberOfMonths={1} />

[majapw]

@ljharb is right (https://github.com/airbnb/react-dates/blob/master/src/components/SingleDatePicker.jsx#L42 for the updated line)

However, the real issue is that instead of

onFocusChange={({ focused2 }) => this.setState({ focused2 })} 

you should probably do:

onFocusChange={({ focused: focused2 }) => this.setState({ focused2 })}

The onFocusChange callback passed back an object with a focused key, not a focused2 key.

[Buddhimal]

@ljharb is right (https://github.com/airbnb/react-dates/blob/master/src/components/SingleDatePicker.jsx#L42 for the updated line)

However, the real issue is that instead of

onFocusChange={({ focused2 }) => this.setState({ focused2 })} 

you should probably do:

onFocusChange={({ focused: focused2 }) => this.setState({ focused2 })}

The onFocusChange callback passed back an object with a focused key, not a focused2 key.

Thanks it works.