import React, { PropTypes } from 'react';
import { render } from 'react-dom';
import reactStringReplace from 'react-string-replace';

const Demo = React.createClass({
  propTypes: {
    content: PropTypes.string.isRequired,
  },

  /**
   * NOTE: In many React examples you will see the `i` or `index` variable used
   * as the key for JSX tags (such as the `<a>` tags in this example), however
   * in this case we are iterating in three separate loops. This menas that we
   * cannot use `key={i}` because all three JSX tags could get the same key.
   */
  render() {
    const text = 'Hey @ian_sinn, check out this link https://github.com/iansinnott/ Hope to see you at #reactconf';
    let replacedText;

    // Match URLs
    replacedText = reactStringReplace(text, /(https?:\/\/\S+)/g, match => (
      <a key={match} href={match}>{match}</a>
    ));

    // Match @-mentions
    replacedText = reactStringReplace(replacedText, /@(\w+)/g, match => (
      <a key={match} href={`https://twitter.com/${match}`}>@{match}</a>
    ));

    // Match hashtags
    replacedText = reactStringReplace(replacedText, /#(\w+)/g, match => (
      <a key={match} href={`https://twitter.com/hashtag/${match}`}>#{match}</a>
    ));

    return (
      <div>
        <h1>React String Replace Demo</h1>
        {replacedText}
      </div>
    );
  },
});

const content = 'Hey my number is 555-555-5555.';

// Render the app
render(<Demo content={content} />, document.getElementById('root'));

@@ -781,29 +781,34 @@
 %5C/%5C/%5CS+)/g, 
+(
 match
+, i)
  =%3E (%0A      
@@ -812,32 +812,36 @@
    %3Ca key=%7Bmatch
+ + i
 %7D href=%7Bmatch%7D%3E%7B
@@ -939,37 +939,42 @@
 ext, /@(%5Cw+)/g, 
+(
 match
+, i)
  =%3E (%0A      %3Ca k
@@ -974,32 +974,36 @@
    %3Ca key=%7Bmatch
+ + i
 %7D href=%7B%60https:/
@@ -1133,21 +1133,26 @@
 %5Cw+)/g, 
+(
 match
+, i)
  =%3E (%0A  
@@ -1168,16 +1168,20 @@
 y=%7Bmatch
+ + i
 %7D href=%7B

Use better keys in example code