Cannot read property 'date' of undefined React material design

Question

I am using storybook reactJs and material-ui for an app. I am trying to build datepicker from Material-ui component and below is my code so far

import React, { Fragment, PureComponent } from 'react';
import  {DatePicker}  from 'material-ui-pickers';

class DatePickers extends PureComponent {
  state = {
    selectedDate: new Date(),
  }

  render() {
    console.log(this.state);
  const  { selectedDate } = this.state;

    return (
      <div>
        <DatePicker
          label="Basic example"
          value={selectedDate}
          onChange={this.handleDateChange}
          animateYearScrolling={false}
          />
      </div>
    )
  }
}

export default DatePickers;

when i open my storybook it shows the below error Cannot read property 'date' of undefined

TypeError: Cannot read property 'date' of undefined at DatePickerWrapper.PickerBase._this.getValidDateOrCurrent (http://localhost:6006/static/preview.bundle.js:52555:24) at DatePickerWrapper.PickerBase (http://localhost:6006/static/preview.bundle.js:52559:19)

Does anyone know. what's going on here?

Did you tried with moving your state assignment in constructor() ? — Rohan Kangale, May 18 '18 at 12:41
Have you tried using `const selectedDate = this.state.selectedDate;`? — Pat Mellon, May 18 '18 at 12:44

score 3 · Accepted Answer · answered May 18 '18 at 13:36

3

Take a look at this working example containing your code for the DatePicker component.

The error might be in the following - did you wrap your component in MuiPickersUtilsProvider with the required utils prop provided?

<MuiPickersUtilsProvider utils={MomentUtils}>
  <DatePicker />
</MuiPickersUtilsProvider>

answered May 18 '18 at 13:36

Zoltan Toth

46,981
12
120
134

worked . thanks . but do you know why is there a scrollbar – Mani May 18 '18 at 18:53
and arrows missing – Mani May 18 '18 at 19:08
Not sure what scrollbar are you talking about.. And the arrows missing because you didn't import Material UI icons. Please refer to [this page](https://material-ui-pickers.firebaseapp.com/installation) - at the very bottom there is a `Font Icons` section. You need to include the icons. Updated sandbox - https://codesandbox.io/s/1r9x22pk5q – Zoltan Toth May 18 '18 at 20:59

score 0 · Answer 2 · answered Jan 28 '22 at 03:06

0

make sure to npm install date-fns, react, react-dom, @mui/lab, and @mui/material

answered Jan 28 '22 at 03:06

dizad87

448
4
15

Cannot read property 'date' of undefined React material design

2 Answers2