ReactJS DatePicker stops working after lifting state up - reactjs

Question

ReactJS DatePicker works fine when I keep the state inside Datepicker itself, however once I lift the state up it stops working - nothing happening when I select a date.
This code works:
import React from "react";
import ReactDOM from "react-dom";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
class Datepicker extends React.Component {
constructor(props) {
super(props);
this.state = {
date: new Date()
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(date) {
this.setState({
date: date
});
}
render() {
return <DatePicker selected={this.state.date} onChange={this.handleChange} />;
}
}
class Index extends React.Component {
render() {
return (
<div>
<Datepicker />
</div>
);
}
}
ReactDOM.render(<Index />, document.getElementById("root"));
But this code does not work - nothing happens when I select a date in the datepicker:
import React from "react";
import ReactDOM from "react-dom";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
class Datepicker extends React.Component {
render() {
return (
<DatePicker
selected={this.props.date}
onChange={() => {
this.props.handleChange(this.props.date);
}}
/>
);
}
}
class Index extends React.Component {
constructor(props) {
super(props);
this.state = {
date: new Date()
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(date) {
this.setState({
date: date
});
}
render() {
return (
<div>
<Datepicker date={this.state.date} handleChange={this.handleChange} />
</div>
);
}
}
ReactDOM.render(<Index />, document.getElementById("root"));
I also uploaded code example here (index.js is not working as expected while index2.js is working).
Would be very grateful if anyone could advise how to lift the state up and at the same moment have Datepicker working.

Answer 1

The issue is you are passing the this.props.date into the handleChange function which never changes.
You can simply remove the arrow function and just call this.props.handleChange without passing it any parameters. It should automatically choose the new date value selected.
import React from "react";
import ReactDOM from "react-dom";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
const Datepicker = props => (
<DatePicker selected={props.date} onChange={props.handleChange} />
);
class Index extends React.Component {
constructor(props) {
super(props);
this.state = {
date: new Date()
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(date) {
this.setState({
date: date
});
}
render() {
return (
<Datepicker
date={this.state.date}
handleChange={this.handleChange}
/>
);
}
}
ReactDOM.render(<Index />, document.getElementById("root"));
See a working example: https://codesandbox.io/s/my4zp6rj8y