title: HTML to rendered html
body: <p>Below is a simplified version of my app where there is a template rendered on the page and it is filled with the help of two text inputs.</p>
  
  <p>It's a "template generator" type app and I want to be able to copy the completed template as rendered on the page so that it can be pasted elsewhere. To do this normally you would click + drag to highlight the rendered html then right click + copy or ctrl + c. </p>
  
  <p>How can I convert my HTML to a rendered version so that I can copy to clipboard with the help of my <code>react-clipboard</code> button? Or is there another way I can achieve this?  </p>
  
  <p>If anything isn't clear please let me know - thanks in advance</p>
  
  <p>TL;DR: Currently when you click on "copy to clipboard" the app is copying html. I want it to copy the contents as it would be rendered on a webpage. For example hello world converted and copied should copy a red h1 that says hello world.</p>
  
  <pre><code>import React, { Component } from 'react';
  import { TextField } from 'material-ui';
  import Clipboard from 'react-clipboard.js';
  import './App.css';
  const logo = 'https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_120x44dp.png';
  
  class App extends Component {
    constructor() {
      super();
      this.state = {
        name: 'Default Name',
        title: 'Default Title'
      };
    }
    componentDidMount() {
      this.setState({template: this.createTemplate(this.state.name, this.state.title) });
    }
    createTemplate(name, title) {
      const template = `&lt;!DOCTYPE html&gt;
      &lt;html&gt;
        &lt;head&gt;
          &lt;link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet"&gt;
        &lt;/head&gt;
        &lt;body&gt;
          &lt;h1&gt;${name}&lt;/h1&gt;
          &lt;h2&gt;${title}&lt;/h2&gt;
        &lt;/body&gt;
      &lt;/html&gt;`
  
      this.setState({template});
    }
    updateValue(event, type) {
      if(type === 'name') {
        this.setState({name: event.target.value});
        this.createTemplate(event.target.value, this.state.title);
      } else {
        this.setState({title: event.target.value});
        this.createTemplate(this.state.name, event.target.value);
      }
    }
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;header className="App-header"&gt;
            &lt;img src={logo} className="App-logo" alt="logo" /&gt;
          &lt;h1 className="App-title"&gt;Signature Builder&lt;/h1&gt;
          &lt;/header&gt;
          &lt;div&gt;
            &lt;br/&gt;
            &lt;TextField hintText="Name" onChange={(e) =&gt; this.updateValue(e, 'name')} /&gt;
            &lt;TextField hintText="Title" onChange={(e) =&gt; this.updateValue(e, 'title')} /&gt;
            &lt;div style={{textAlign: 'left', margin: 10}} dangerouslySetInnerHTML={{ __html: this.state.template }} /&gt;
            &lt;Clipboard data-clipboard-text={this.state.template}&gt;
              copy to clipboard
            &lt;/Clipboard&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>