Passing up function calls to handle nested state changes. What am I doing wrong here?

Question

I believe the nuance here that I need to understand is borne out of updating a nested state, if I could understand Wale's logic here, and how it applies to my example that'd be great.

I've tried this following code:

NewNotePage.js //where this.state.note.date is updated

class NewNotePage extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      note: {
        title: "",
        body: "",
        createdAt: null,
        updatedAt: null,
        date:null
      }
    };
    this.handleDate = this.handleDate.bind(this);
    this.handleTime = this.handleTime.bind(this);
  }

  handleDate = date => this.setState({ date })
  handleTime = date => this.setState({ date })

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

    return (
      <div>
        <PickerDrawer 
        show={this.state.drawerOpen} 
        date={this.state.note.date} 
        handleTime={this.handleTime} 
        handleDate={this.handleDate} />
        {backdrop}
      </div>
    );
  }
}

PickerDrawer.js //where this.props.note.date is selected

class PickerDrawer extends React.Component {
  constructor(props) {
    super(props);

  render(props) {
    return (
      <div className={drawerClasses}>
        <MuiPickersUtilsProvider utils={DateFnsUtils}>
          <DatePicker
            label="Due Date"
            value={this.props.date}
            onChange={this.props.handleDate}
            animateYearScrolling
            showTodayButton={true}
            disablePast={true}
          />
          <TimePicker
            label="Time"
            value={this.props.date}
            onChange={this.props.handleTime}
            animateYearScrolling
          />
        </MuiPickersUtilsProvider>
      </div>
    );
  }
}

console.log(this.state.note.date) in NewNotePage throws null, as it is in initial state

Answer 1

You need to make a copy of your state first in your handlers using the spread operator:

const currentState = {...this.state};

After that, you can update your date by replacing it in the object:

currentState.note.date = event.target.value;

Finally, update your state again with this new state object:

this.setState(currentState);

Check it out the final code here:

If you change your onChange on your DatePicker to:

 <DatePicker
        label="Due Date"
        value={this.props.date}
        onChange={(event, x) => {
          this.props.handleDate(event);
        }}
        animateYearScrolling
        showTodayButton={true}
        disablePast={true}
      />

and the handleDate in the NewNotePage to:

 handleDate = event => {
const currentState = { ...this.state };
currentState.note.date = event;

this.setState(currentState);

};

You should be able to get your state updated.

I did notice, however, that your state updates, but the datepicker does not.

I decided to print out the props in the PickerDrawer render method and notice that it's called twice and with different props.

PickerDrawer | render 
Object {show: true, date: null, handleDate: function bound ()}
PickerDrawer | render 
Object {className: "picker-drawer", close: undefined}

PickerDrawer:

import React from "react";
import DateFnsUtils from "@date-io/date-fns";
import ".././non-issues/PickerBackdrop.css";
import {
  DatePicker,
  TimePicker,
  DateTimePicker,
  MuiPickersUtilsProvider
} from "@material-ui/pickers";

class PickerDrawer extends React.Component {
  state = { date: null };
  constructor(props) {
    super(props);
  }

  dateHandler = date => {
    this.setState({ date: date });
    this.props.handleDate(this.state.date);
  };

  render() {
    console.log("Rendering Picker Drawer");
    let drawerClasses = "picker-drawer";
    if (this.props.show) {
      drawerClasses = "picker-drawer open";
    }
    return (
      <div className={drawerClasses}>
        <MuiPickersUtilsProvider utils={DateFnsUtils}>
          <DatePicker
            label="Due Date"
            value={this.state.date}
            onChange={(event, x) => {
              this.dateHandler(event);
            }}
            animateYearScrolling
            showTodayButton={true}
            disablePast={true}
          />
          <TimePicker
            label="Time"
            value={this.state.date}
            onChange={(event, x) => {
              this.props.handleDate(event);
            }}
            animateYearScrolling
            className=""
          />
        </MuiPickersUtilsProvider>
      </div>
    );
  }
}
export default PickerDrawer;