From 430a1786edfeb5e9415e474f92ab05a4234788a8 Mon Sep 17 00:00:00 2001
From: Fujimura Daisuke <me@fujimuradaisuke.com>
Date: Wed, 6 Jan 2016 12:41:41 +0900
Subject: [PATCH] Supply key to a tags

---
 src/react-autolink.js       | 10 +++++++---
 test/react-autolink-test.js | 12 ++++++++++--
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/react-autolink.js b/src/react-autolink.js
index 5cf8ca2..68b46fe 100644
--- a/src/react-autolink.js
+++ b/src/react-autolink.js
@@ -12,7 +12,7 @@ let ReactAutolink = () => {
     autolink(text, options = {}) {
       if (!text) return [];
 
-      return text.split(delimiter).map(word => {
+      return text.split(delimiter).map((word, index) => {
         let match = word.match(delimiter);
         if (match) {
           let url = match[0];
@@ -25,11 +25,15 @@ let ReactAutolink = () => {
 
           return React.createElement(
             'a',
-            assign({href: strStartsWith(url, 'http') ? url : `http://${url}`}, options),
+            assign({href: strStartsWith(url, 'http') ? url : `http://${url}`, key: index}, options),
             url
           );
         } else {
-          return word;
+          return React.createElement(
+            'span',
+            { key: index },
+            word
+          );
         }
       });
     }
diff --git a/test/react-autolink-test.js b/test/react-autolink-test.js
index 72ffa8c..e382a1f 100644
--- a/test/react-autolink-test.js
+++ b/test/react-autolink-test.js
@@ -44,10 +44,10 @@ describe("ReactAutolinkMixin", () => {
 
   it("render", () => {
     ReactDOM.render(<SampleComponent text='foo http://example.org' />, div);
-    let span = ReactDOM.findDOMNode(TestUtils.findRenderedDOMComponentWithTag(sampleComponent, "span"));
+    let span = ReactDOM.findDOMNode(TestUtils.scryRenderedDOMComponentsWithTag(sampleComponent, "span")[0]);
     assert.equal(
       span.innerHTML,
-      '<span data-reactid=\".0.0.0\">foo </span><a href=\"http://example.org\" data-reactid=\".0.0.1\">http://example.org</a><span data-reactid=\".0.0.2\"></span>'
+      '<span data-reactid=\".0.0.$0\">foo </span><a href=\"http://example.org\" data-reactid=\".0.0.$1\">http://example.org</a><span data-reactid=\".0.0.$2\"></span>'
     );
   });
 
@@ -156,6 +156,14 @@ describe("ReactAutolinkMixin", () => {
       assert.ok(links.length === 2);
     });
 
+    it("provides keys to links", () => {
+      const shallowRenderer = TestUtils.createRenderer();
+      shallowRenderer.render(<SampleComponent text='example.org bar example.com baz' />);
+      component = shallowRenderer.getRenderOutput();
+
+      assert(component.props.children.props.children.every((child) => child.key))
+    });
+
     it("has attributes when options are given", () => {
       ReactDOM.render(<SampleComponent text='example.org' options={{target: "_blank", rel: "nofollow"}} />, div);
       let link = ReactDOM.findDOMNode(TestUtils.findRenderedDOMComponentWithTag(sampleComponent, "a"));