Can't get Materialize Picker to work in React - reactjs

Question

I am new to React and can't seem to get my Materialize Picker to work at all.
I have all the Materialize installed and imported.
It displays correctly and opens correctly but when I select a date, I get an error displaying every time and can't figure out why.
TypeError: Cannot read property 'completeBy' of undefined
I have added all my code below for my test page where it's currently sitting.
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { addToDo } from '../../store/actions/todoActions';
import { Redirect } from 'react-router-dom';
import M from "materialize-css";
//import moment from 'moment';
class AddToDo extends Component {
state = {
title: '',
content: '',
assignTo: '',
completeBy: new Date(),
format: 'ddd d, mmm',
//formatMoment: 'ddd D, MMM'
}
handleChange = (e) => {
this.setState({
[e.target.id]: e.target.value
})
}
handleSubmit = (e) => {
e.preventDefault();
this.props.addToDo(this.state);
this.props.history.push('/');
}
handleCancel = (e) => {
e.preventDefault();
this.props.history.push('/');
}
canBeSubmitted() {
const { title, content, assignTo } = this.state;
return title.length > 0 && content.length > 0 && assignTo.length > 0;
}
componentDidMount() {
let selects = document.querySelectorAll('select');
let elems = document.querySelectorAll('.datepicker');
M.Datepicker.init(elems, {
defaultDate: new Date(),
format: this.state.format,
container: 'body',
onSelect: function(date) {
this.setState({ completeBy: this.state.completeBy }); // Errors here
},
autoClose: true
});
M.FormSelect.init(selects, {});
}
render() {
const { auth } = this.props;
const isEnabled = this.canBeSubmitted();
if (!auth.uid) {
return <Redirect to='/login' />
}
return (
<div className="container">
<form className="white" onSubmit={ this.handleSubmit }>
<h5 className="grey-text text-darken-3">Add a new todo item</h5>
<div className="input-field">
<input type="text" id='title' onChange={ this.handleChange } autoFocus />
<label htmlFor="title">Todo title <span className="red-text">*</span></label>
</div>
<div className="input-field">
<textarea id="content" className="materialize-textarea" onChange={ this.handleChange }></textarea>
<label htmlFor="content">Todo content <span className="red-text">*</span></label>
</div>
<div className="input-field">
<select id="assignTo" onChange={ this.handleChange }>
<option value="default" disabled selected>Please select</option>
<option value="Kyle">Kyle</option>
<option value="Mike">Mike</option>
<option value="Tony">Tony</option>
</select>
<label htmlFor="assignTo">Assign todo to <span className="red-text">*</span></label>
</div>
<div className="input-field">
<label htmlFor="completeBy">To be completed by</label>
<input
id="completeBy"
type="text"
className="datepicker dateset"
// defaultValue={ moment(this.state.completeBy).format(
// this.state.formatMoment
// )}
/>
</div>
<div className="row">
<div className="col s12 l1">
<button className="btn pink lighten-1 col s12" disabled={!isEnabled}>Add</button>
</div>
<div className="col s12 l1">
<button onClick={this.handleCancel} className="btn yellow darken-2 col s12">Cancel</button>
</div>
</div>
</form>
</div>
)
}
}
const mapStateToProps = (state) => {
return {
auth: state.firebase.auth
}
}
const mapDispatchToProps = (dispatch) => {
return {
addToDo: (todo) => dispatch(addToDo(todo))
}
}
export default connect(mapStateToProps, mapDispatchToProps)(AddToDo)
Some may recognise the code base as I was following Net Ninja tutorials but adding to it for my learning. I have also had a look at the following stack question and tried their solution as its the same code as mine also but it does not work for me.
I have checked my package.json and I am using "materialize-css": "^1.0.0-rc.2" and I am not using react-materialize.
Screenshots
Initial load
Click in the date field
Set a date, picker closes and get

Answer 1

Most of the time I use arrow functions when I define callbacks. Because it handles the scope of this differently than a function. Try to replace onSelect callback to an arrow function:
M.Datepicker.init(elems, {
defaultDate: new Date(),
format: this.state.format,
container: 'body',
onSelect: (date) => {
this.setState({ completeBy: this.state.completeBy });
},
autoClose: true
});