<commit_before>import React from 'react';
import DayPicker from '../../../src';

import '../../../src/style.css';

const currentYear = (new Date()).getFullYear();
const fromMonth = new Date(currentYear, 0, 1, 0, 0);
const toMonth = new Date(currentYear + 10, 11, 31, 23, 59);

// Component will receive date, locale and localeUtils props
function YearMonthForm({ date, localeUtils, onChange }) {
  const months = localeUtils.getMonths();

  const years = [];
  for (let i = fromMonth.getFullYear(); i <= toMonth.getFullYear(); i += 1) {
    years.push(i);
  }

  const handleChange = function handleChange(e) {
    const { year, month } = e.target.form;
    onChange(new Date(year.value, month.value));
  };

  return (
    <form className="DayPicker-Caption">
      <select name="month" onChange={ handleChange } value={ date.getMonth() }>
        { months.map((month, i) =>
          <option key={ i } value={ i }>
            { month }
          </option>)
        }
      </select>
      <select name="year" onChange={ handleChange } value={ date.getFullYear() }>
        { years.map((year, i) =>
          <option key={ i } value={ year }>
            { year }
          </option>)
        }
      </select>
    </form>
  );
}

export default class YearNavigation extends React.Component {

  state = {
    initialMonth: fromMonth,
  };

  render() {
    return (
      <div className="YearNavigation">
        <DayPicker
          initialMonth={ this.state.initialMonth }
          fromMonth={ fromMonth }
          toMonth={ toMonth }
          captionElement={
            <YearMonthForm onChange={ initialMonth => this.setState({ initialMonth }) } />
          }
        />
      </div>
    );
  }

}
<commit_msg>Fix example for v4.0.0<commit_after>import React from 'react';
import DayPicker from '../../../src';

import '../../../src/style.css';

const currentYear = (new Date()).getFullYear();
const fromMonth = new Date(currentYear, 0, 1, 0, 0);
const toMonth = new Date(currentYear + 10, 11, 31, 23, 59);

// Component will receive date, locale and localeUtils props
function YearMonthForm({ date, localeUtils, onChange }) {
  const months = localeUtils.getMonths();

  const years = [];
  for (let i = fromMonth.getFullYear(); i <= toMonth.getFullYear(); i += 1) {
    years.push(i);
  }

  const handleChange = function handleChange(e) {
    const { year, month } = e.target.form;
    onChange(new Date(year.value, month.value));
  };

  return (
    <form className="DayPicker-Caption">
      <select name="month" onChange={ handleChange } value={ date.getMonth() }>
        { months.map((month, i) =>
          <option key={ i } value={ i }>{ month }</option>)
        }
      </select>
      <select name="year" onChange={ handleChange } value={ date.getFullYear() }>
        { years.map((year, i) =>
          <option key={ i } value={ year }>
            { year }
          </option>)
        }
      </select>
    </form>
  );
}

export default class YearNavigation extends React.Component {

  state = {
    initialMonth: fromMonth,
  };

  constructor(props) {
    super(props);
    this.handleYearMonthChange = this.handleYearMonthChange.bind(this);
  }

  handleYearMonthChange(month) {
    this.daypicker.showMonth(month);
  }

  render() {
    return (
      <div className="YearNavigation">
        <DayPicker
          ref={ (el) => { this.daypicker = el; } }
          initialMonth={ this.state.initialMonth }
          fromMonth={ fromMonth }
          toMonth={ toMonth }
          captionElement={
            <YearMonthForm onChange={ this.handleYearMonthChange } />
          }
        />
      </div>
    );
  }

}

{'fraction_non_alphanumeric': 0.1541621029572837, 'fraction_numerical': 0.009036144578313253, 'mean_word_length': 2.4204119850187267, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 37, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2478790', 'n_tokens_mistral': 1123, 'n_tokens_neox': 1093, 'n_words': 275}