import React from 'react';
import ReactDOM from 'react-dom';

class SlideEdit extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(event) {
    this.props.onChange(this.props.slide, event.target.value);
  }

  render() {
    return (
      <div>
        <input type="text" value={this.props.slide.name} onChange={this.handleChange} />
      </div>
    );
  }
}

class SlidePreview extends React.Component {
  render() {
    return (
      <div>{this.props.slide.name}</div>
    );
  }
}

class SlideDetails extends React.Component {
  render() {
    return (
      <div>
        <SlidePreview slide={this.props.slide} />
        <SlideEdit slide={this.props.slide} onChange={this.props.onChange} />
      </div>
    );
  }
}

class SlideList extends React.Component {
  render() {
    return (
      <ul>
        {this.props.slides.map((slide) =>
          <li key={slide.name}>
            <SlidePreview slide={slide} />
          </li>
        )}
      </ul>
    );
  }
}

class ReSlide extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.state = {
      slides: [
        { name: "slide1" },
        { name: "slide2" },
        { name: "slide3" },
        { name: "slide4" },
        { name: "slide5" }
      ]
    };
  }

  handleChange(slideToUpdate, name) {
    const slides = this.state.slides.map(function (slide) {
      if (slide === slideToUpdate) {
        slide.name = name;
      }
      return slide;
    });
    this.setState({ slides: slides })
  }

  render() {
    return (
      <div>
        <SlideList slides={this.state.slides} />
        <SlideDetails slide={this.state.slides[0]} onChange={this.handleChange} />
      </div>
    );
  }
}

ReactDOM.render(
  <ReSlide />,
  document.getElementById('root')
);
@@ -55,27 +55,236 @@
 -dom';%0A%0A
+function generateGuid() %7B%0A  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/%5Bxy%5D/g, function (c) %7B%0A    var r = Math.random() * 16 %7C 0, v = c == 'x' ? r : (r & 0x3 %7C 0x8);%0A    return v.toString(16);%0A  %7D);%0A%7D%0A%0A
 class 
-Slide
 Edit ext
@@ -658,21 +658,16 @@
 %0A%0Aclass 
-Slide
 Preview 
@@ -779,21 +779,16 @@
 %0A%0Aclass 
-Slide
 Details 
@@ -852,37 +852,32 @@
  %3Cdiv%3E%0A        %3C
-Slide
 Preview slide=%7Bt
@@ -905,21 +905,16 @@
        %3C
-Slide
 Edit sli
@@ -1002,21 +1002,16 @@
 %0A%0Aclass 
-Slide
 List ext
@@ -1137,20 +1137,18 @@
 =%7Bslide.
-name
+id
 %7D%3E%0A     
@@ -1155,21 +1155,16 @@
        %3C
-Slide
 Preview 
@@ -1229,24 +1229,358 @@
   );%0A  %7D%0A%7D%0A%0A
+class SideBar extends React.Component %7B%0A  constructor(props) %7B%0A    super(props);%0A    this.onClick = this.onClick.bind(this);%0A  %7D%0A%0A  onClick() %7B%0A    this.props.onAdd();%0A  %7D%0A%0A  render() %7B%0A    return (%0A      %3Cdiv%3E%0A        %3CList slides=%7Bthis.props.slides%7D /%3E%0A        %3Cbutton onClick=%7Bthis.onClick%7D%3EAdd%3C/button%3E%0A      %3C/div%3E%0A    );%0A  %7D%0A%7D%0A%0A
 class ReSlid
@@ -1698,24 +1698,72 @@
 bind(this);%0A
+    this.handleAdd = this.handleAdd.bind(this);%0A
     this.sta
@@ -1786,32 +1786,52 @@
 des: %5B%0A        %7B
+ id: generateGuid(),
  name: %22slide1%22 
@@ -1834,32 +1834,52 @@
 e1%22 %7D,%0A        %7B
+ id: generateGuid(),
  name: %22slide2%22 
@@ -1882,32 +1882,52 @@
 e2%22 %7D,%0A        %7B
+ id: generateGuid(),
  name: %22slide3%22 
@@ -1930,32 +1930,52 @@
 e3%22 %7D,%0A        %7B
+ id: generateGuid(),
  name: %22slide4%22 
@@ -1986,16 +1986,36 @@
        %7B
+ id: generateGuid(),
  name: %22
@@ -2279,16 +2279,164 @@
 lides %7D)
+;%0A  %7D%0A%0A  handleAdd() %7B%0A    const slides = this.state.slides.concat(%7B id: generateGuid(), name: %22newslide%22 %7D);%0A    this.setState(%7B slides: slides %7D);
 %0A  %7D%0A%0A  
@@ -2485,16 +2485,14 @@
   %3CS
-l
 ide
-List
+Bar
  sli
@@ -2506,32 +2506,55 @@
 is.state.slides%7D
+ onAdd=%7Bthis.handleAdd%7D
  /%3E%0A        %3CSli
@@ -2550,21 +2550,16 @@
        %3C
-Slide
 Details 

add slide