Merge pull request #116 from alonbt/master

docs(migration): fix key value + adding close tag for CSSTransition when needed

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,15 +184,15 @@ 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 }}
 -    >
 +    <FadeTransition>
        <div onClick={() => this.handleRemove(i)}>
          {item}
        </div>
--    <CSSTransition>
+-    </CSSTransition>
 +    </FadeTransition>
    ));