title: Rendering iframe into React
body: <p>I've got the following component:</p>
  
  <pre><code>export default class VideoArchiveContent extends React.Component {
    constructor() {
      super();
      this.state = {
        videos: []
      }
    } 
    componentDidMount() {
      this.VideosTracker = Tracker.autorun(() =&gt; {
        Meteor.subscribe('videos');
        const videos = Videos.find().fetch();
        this.setState({ videos })
      });
    };
    componentWillUnmount() {
      this.VideosTracker.stop();
    };
    renderVideos = () =&gt; {
      return this.state.videos.map((video) =&gt; {
        return &lt;div key={video._id}&gt;{video.embed}&lt;/div&gt;
      });
    };
    render() {
      return (
        &lt;div&gt;
          {this.renderVideos()}
        &lt;/div&gt;
      )
    }
  };
  </code></pre>
  
  <p>I'm expecting the iframe to render to the screen. What renders is the iframe string.</p>
  
  <p>If I place the iframe in the return statement like this:</p>
  
  <pre><code>return (
    &lt;div&gt;
      &lt;iframe src="https://player.vimeo.com/video/270962511" width="500" height="281" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
    &lt;/div&gt;
  )
  </code></pre>
  
  <p>The iframe renders as expected.</p>
  
  <p>Is there a solution?</p>