title: React replace placeholder characters with react element
body: <p>I have a REACTSjs application and am trying to solve a problem with localization.</p>
  
  <p>I receive some text from the API in which there are some special characters marking the text that should be localized. Something like this:</p>
  
  <pre><code>This is a translated text: [labels.example]. Awesome!
  </code></pre>
  
  <p>I am using <code>react-redux-localize</code> to translate the keys so the result should look like this:</p>
  
  <pre><code>This is a translated text: &lt;Translate id="labels.example" /&gt;. Awesome!
  </code></pre>
  
  <p>I tried solving this problem with <code>renderHTML</code> from <code>react-render-html</code>:</p>
  
  <pre><code>function localizeNames(text) {
      text = text.replace("[", "&lt;Translate id=\"");
      text = text.replace("]", "\" /&gt;");
      return text;
  }
  </code></pre>
  
  <p>and calling this function in my <code>render</code> function: </p>
  
  <pre><code>&lt;div&gt;{renderHTML(localizeNames(text))}&lt;/div&gt;
  </code></pre>
  
  <p>but it throws an exception:</p>
  
  <pre><code>Warning: The tag &lt;translate&gt; is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
  </code></pre>
  
  <p>Can anybody help me with this use-case? I am quite new to javascript.</p>