From 10d4566d17ba989b6660e35051e34222fc97708c Mon Sep 17 00:00:00 2001
From: gpbl <io@gpbl.org>
Date: Thu, 23 Jul 2015 07:46:52 +0200
Subject: [PATCH] Use a day-based key for day cells (#29)

---
 src/DayPicker.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/DayPicker.js b/src/DayPicker.js
index 9a82fa65f1..3992cdc665 100644
--- a/src/DayPicker.js
+++ b/src/DayPicker.js
@@ -160,12 +160,12 @@ class DayPicker extends Component {
     const firstDayOfWeek = localeUtils.getFirstDayOfWeek(locale);
     return Utils.getWeekArray(month, firstDayOfWeek).map((week, i) =>
       <div key={i} className="DayPicker-Week" role="row">
-        { week.map((day, j) => this.renderDay(month, day, j)) }
+        { week.map(day => this.renderDay(month, day)) }
       </div>
     );
   }
 
-  renderDay(month, day, i) {
+  renderDay(month, day) {
     const { currentMonth } = this.state;
     const { renderDay } = this.props;
 
@@ -173,6 +173,7 @@ class DayPicker extends Component {
 
     let className = "DayPicker-Day";
     let modifiers = [];
+    let key = `${day.getFullYear()}${day.getMonth()}${day.getDate()}`;
 
     const isToday = Utils.isSameDay(day, new Date());
     if (isToday) {
@@ -192,7 +193,7 @@ class DayPicker extends Component {
     className += modifiers.map(modifier => ` ${className}--${modifier}`).join("");
 
     if (isOutside && !enableOutsideDays) {
-      return <div key={`outside${i}`} className={className} />;
+      return <div key={`outside-${key}`} className={className} />;
     }
 
     const { onDayMouseEnter, onDayMouseLeave, onDayTouchTap, onDayClick }
@@ -206,7 +207,7 @@ class DayPicker extends Component {
       }
     }
     return (
-      <div key={ i } className={ className }
+      <div key={ key } className={ className }
         tabIndex={ tabIndex }
         role="gridcell"
         onKeyDown={