Trouble changing React class into a function

Question

I heard that classes are hardly used in React anymore, since functions work so well. So, I got react-datepicker class copied elsewhere and I'm now trying to change it into a function.

It doesn't quite work correctly, it gives me today's date no matter what I choose. Calendar chooses the day I want, but it passes today's date on.

Class:

class CalendarClass extends Component {
  constructor(props) {
    super(props);
    this.state = {
      date: new Date()
    };
  }

  handleChange = date => {
    this.setState({
      date: date
    });
  }

  render() {
    return (
      <div>
        <DatePicker
          selected={this.state.date}
          onChange={this.handleChange}
          minDate={new Date()}
          dropdownMode="select"
        />
        <AddMassageDate date={this.state.date} dateData={this.props.dateData} />
      </div>
    );
  }
}

Function:

function CalendarClass ({ date, dateData }) {

  let [day, setDay] = useState(new Date());

  let handleChange = day => {
    setDay(day);
    date = day;
  };

  return (
    <>
      <DatePicker
        selected={day}
        onChange={handleChange}
        minDate={new Date()}
        dropdownMode="select"
      />
      <AddMassageDate date={date} dateData={dateData} />
    </>
  );
}

Answer 1

The problem is that your date prop is change, but this change is not persisted between renders of the component. I would suggest removing the date prop and only use the day state hook.

function CalendarClass ({ dateData }) {

  let [day, setDay] = useState(new Date());

  return (
    <div>
      <DatePicker
        selected={day}
        onChange={d => setDay(d)}
        minDate={new Date()}
        dropdownMode="select"
      />
      <AddMassageDate date={day} dateData={dateData} />
    </div>
  );
}