CODEWITHSUNDEEP
reactjsdatepicker
sergodeeva
sergodeeva

Reputation: 724

ReactJS DatePicker stops working after lifting state up

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.

Upvotes: 0

Views: 314

Answers (1)

dev
dev

Reputation: 893

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

Upvotes: 2

Related Questions