From 8968fd6a67006ce0d5d059c1f0c9198a8847e539 Mon Sep 17 00:00:00 2001
From: Alon Bartur <alonbt@gmail.com>
Date: Sat, 15 Jul 2017 18:20:15 +0300
Subject: [PATCH] docs(migration): fix key value + adding close tag for
 CSSTransition when needed

---
 Migration.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/Migration.md b/Migration.md
index 6ed3a2f8..f9c00d36 100644
--- a/Migration.md
+++ b/Migration.md
@@ -63,7 +63,7 @@ class TodoList extends React.Component {
 
   render() {
     const items = this.state.items.map((item, i) => (
-      <div key={item} onClick={() => this.handleRemove(i)}>
+      <div key={i} onClick={() => this.handleRemove(i)}>
         {item}
       </div>
     ));
@@ -88,7 +88,7 @@ The most straightforward way to migrate is to use `<TransitionGroup>` instead of
 ```diff
  render() {
    const items = this.state.items.map((item, i) => (
-     <div key={item} onClick={() => this.handleRemove(i)}>
+     <div key={i} onClick={() => this.handleRemove(i)}>
        {item}
      </div>
    ));
@@ -141,14 +141,14 @@ Now we add the `<CSSTransition>` component:
  render() {
    const items = this.state.items.map((item, i) => (
 +    <CSSTransition
-+      key={item}
++      key={i}
 +      classNames="example"
 +      timeout={{ enter: 500, exit: 300 }}
 +    >
        <div onClick={() => this.handleRemove(i)}>
          {item}
        </div>
-+    <CSSTransition>
++    </CSSTransition>
    ));
 
    return (
@@ -184,7 +184,7 @@ We can then use it like:
  render() {
    const items = this.state.items.map((item, i) => (
 -    <CSSTransition
--      key={item}
+-      key={i}
 -      classNames="example"
 -      timeout={{ enter: 500, exit: 300 }}
 -    >
@@ -192,7 +192,7 @@ We can then use it like:
        <div onClick={() => this.handleRemove(i)}>
          {item}
        </div>
--    <CSSTransition>
+-    </CSSTransition>
 +    </FadeTransition>
    ));