add test preview component, vulnerable to xss

README.md

@@ -3,3 +3,5 @@ https://github.com/Hashnode/mern-starter
 
 * https://github.com/petehunt/react-howto
 * https://github.com/gajus/react-css-modules
+* https://github.com/jsbin/jsbin (especially look at the console)
+* Need to figure out how to solve the XSS issue, https://github.com/jsbin/jsbin/wiki/Best-practices-for-building-your-own-live-paste-bin

shared/components/Preview/Preview.jsx

@@ -1,10 +1,31 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 
 class Preview extends React.Component {
-	_iframe: HTMLIFrameElement
+	
+	componentDidMount() {
+		this.renderFrameContents();
+	}
+
+	renderFrameContents() {
+		let doc = ReactDOM.findDOMNode(this).contentDocument;
+    if(doc.readyState === 'complete') {
+       ReactDOM.render(this.props.children, doc.body);
+    } else {
+       setTimeout(this.renderFrameContents, 0);
+    }
+	}
+
+	componentDidUpdate() {
+		this.renderFrameContents();
+	}
+
+	componentWillUnmount() {
+		React.unmountComponentAtNode(this.getDOMNode().contentDocument.body);
+	}
 
 	render() {
-    return <div ref="container" className="preview-holder"></div>;
+    return <iframe sandbox="allow-same-origin"></iframe>;
   }
 }
 

shared/containers/App/App.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import Editor from '../../components/Editor/Editor'
+import Preview from '../../components/Preview/Preview'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import * as FileActions from '../../redux/actions'
@@ -7,9 +8,14 @@ import * as FileActions from '../../redux/actions'
 class App extends React.Component {
 	render() {
 		return (
+			<div class="app">
 				<Editor 
 					content={this.props.file.content}
 					updateFile={this.props.updateFile} />
+				<Preview>
+					<h1>Hello world!</h1>
+				</Preview>
+			</div>
 		);
 	}
 }