title: Inject dynamic content react
body: <p>I want to display content from my database into a react component.
  The content can be a string or html, I know React don't really like html injections ...</p>
  
  <p>I write a module but it's not working as I want</p>
  
  <pre><code>import $ from "jquery";
  import React from 'react'
  
  export default React.createClass({
  
    getInitialState() {
      return { content: [] };
    },
  
    componentDidMount: function() {
  
      if (this.state.content.length == 0) {
        $.get('/content', function(data) {
          this.setState({
            content: data
          })
        }.bind(this))
      }
  
    },
  
    getValue() {
  
      for (let i = 0; i &lt; this.state.content.length; i++) {
        if (this.state.content[i].key == this.props.contentKey) {
          return this.data[i].value;
        }
      }
  
      return this.props.contentKey;
    },
  
    render() {
      return (&lt;span&gt;{this.getValue()}&lt;/span&gt;)
    }
  })
  </code></pre>
  
  <p>this one will convert <code>&lt;Content contentKey="key"/&gt;</code> into <code>&lt;span&gt;value&lt;/span&gt;</code></p>
  
  <p>I'd like for example</p>
  
  <pre><code>render() {
      return (
          &lt;div&gt;
              {content('key1')}
              &lt;img src={content('key2')} /&gt;
          &lt;/div&gt;
      )
  }
  </code></pre>
  
  <p>let's say my server returns</p>
  
  <pre><code>{"key1": "&lt;p&gt;I am key 1 value&lt;/p&gt;", "key2": "key2Value.jpg"}
  </code></pre>
  
  <p>The result should be something like</p>
  
  <pre><code>&lt;div&gt;
      &lt;p&gt;I am key 1 value&lt;/p&gt;
      &lt;img src="key2Value.jpg" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And I don't want the html to be escaped</p>