New user to react in need of help implementing datepicker-npm - npm

Question

Not sure what I am doing wrong here??
In a simple react-redux web app I can't get the new date to set.
The onChange should be setting the selection to the new state for the 'purchase_date'??
Here is my code...
import React, { Component } from 'react';
import { connect } from 'react-redux';
import DatePicker from 'react-datepicker';
import moment from 'moment';
import 'react-datepicker/dist/react-datepicker.css';
// CSS Modules, react-datepicker-cssmodules.css
// import 'react-datepicker/dist/react-datepicker-cssmodules.css';
class DateSelect extends Component {
constructor (props) {
super(props)
this.state = {
startDate: moment()
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(date) {
this.setState({
selected: date
});
}
render() {
return <DatePicker
selected={this.state.startDate}
onChange={this.purchase_date}
/>;
}
}
export default DateSelect;
///////
<TableRow selectable={false} key={id}>
<TableRowColumn>{item_description}</TableRowColumn>
<TableRowColumn>{purchase_date}</TableRowColumn>
<TableRowColumn id="count-me">${item_price}
**<DatePicker
selected={this.state.startDate}
onChange={this.purchase_date}
/>**

Answer 1

Firstly, you are binding your handler but aren't actually using it. Additionally, you may wish to pass in a date via your props so it can be set to an initial value that is not the current date (defaulting to current date if not specified:
class DateSelect extends Component {
constructor (props) {
super(props);
this.state = {
startDate: moment()
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(date) {
this.setState({
selected: date
});
}
render() {
return <DatePicker
selected={this.props.selected || this.state.startDate}
onChange={this.handleChange} // <- attaches handleChange to onChange
/>;
}
}
Now, down in your JSX for your table, you only need to call for your component. you should call your custom component instead of DatePicker so that it loads with your behaviors and allows you to do things like pass default or stored values to the components props:
<TableRow selectable={false} key={id}>
<TableRowColumn>{item_description}</TableRowColumn>
<TableRowColumn>{purchase_date}</TableRowColumn>
<TableRowColumn id="count-me">${item_price}
<!-- DateSelect component, passing the 'selected' prop as
an value in someStartDate -->
<DateSelect selected={someStartDate} />