'use strict';

import React from 'react';

class Snippets extends React.Component {

  constructor () {
    super();
    this.state = {
      snippet1: "<div>This is snippet 1</div>",
      snippet2: "<div>This is snippet 2</div>"
     }
    } 
  
  componentWillMount(){
    console.log("Snippets.js ", this.props.snippets);

  }



  snippetsContainer(){
    var snipCont = document.querySelector('snippets-container');
    console.log(snipCont);
    
  }

  
  render() {

    var displayNone = {
    display: "none"
    } 
    var display = {

    }
    return (
      <div>
        <div className="snippets-cont">
          <p id={0} style={displayNone}>{this.state.snippet1}</p>
          <p id={1} style={displayNone}>{this.state.snippet2}</p>
        </div>


      </div>
    );
  }

}

export default Snippets;
@@ -145,16 +145,17 @@
 ippet1: 
+%5B
 %22%3Cdiv%3ETh
@@ -177,16 +177,49 @@
 %3C/div%3E%22,
+  %22%3Cdiv%3EPart2 of snippet%3C/div%3E%22%5D,
 %0A      s
@@ -357,16 +357,95 @@
 s);%0A
+  %7D%0A%0A  componentDidMount()%7B%0A    console.log(%22snippet1%22, this.state.snippet1%5B1%5D);
 %0A  %7D%0A%0A%0A
-%0A
   sn
@@ -559,13 +559,8 @@
 t);%0A
-    %0A
   %7D%0A
@@ -780,16 +780,50 @@
 snippet1
+%5B0%5D%7D %3Cbr/%3E %7Bthis.state.snippet1%5B1%5D
 %7D%3C/p%3E%0A  

change snippet state to array to sep lines and put each line in the snippet <p>