How to use the react-component-tree.serialize function in react-component-tree

import ExampleComponent from 'react-deep-diff'

const last = array => array[array.length - 1]
const first = array => array[0]
const second = array => array[1]
const beforeLast = array => array[array.length - 2]

const el1 = <div>
  Hello
  <span>Wor<span>What up</span></span>
</div>


console.log('wat', serialize(el1))

const serialized = serialize(el1)

// console.log('json react', JSON.stringify(el1))
// 
// const el2 = <div>
//   Hello
//   <span>World<span>how do you do</span></span>
//   <div>
//     <h1>This is a new Element</h1>
//   </div>
// </div>
// 
// // path be like ["props", "children", 1, "props", "children", 1, "props", "children"]
// const changeReactElement = (element, path, change, renderChange) =&gt; {
//   // first path has to always be props, if not return element
//   console.log('path', path)
//   if (path[0] !== 'props') {

import takeWhile from 'lodash/takeWhile'
import { serialize, render } from 'react-component-tree'
import ExampleComponent from 'react-deep-diff'

const last = array => array[array.length - 1]
const first = array => array[0]
const second = array => array[1]
const beforeLast = array => array[array.length - 2]

const el1 = <div>
  Hello
  <span>Wor<span>What up</span></span>
</div>


console.log('wat', serialize(el1))

const serialized = serialize(el1)

// console.log('json react', JSON.stringify(el1))
// 
// const el2 = <div>
//   Hello
//   <span>World<span>how do you do</span></span>
//   <div>
//     <h1>This is a new Element</h1>
//   </div>
// </div>
// 
// // path be like ["props", "children", 1, "props", "children", 1, "props", "children"]
// const changeReactElement = (element, path, change, renderChange) =&gt; {
//   // first path has to always be props, if not return element

onFixtureUpdate: function() {
    if (!this.refs.preview ||
        // Don't update fixture contents while the user is editing the fixture
        this.state.isEditorFocused) {
      return;
    }

    var snapshot = ComponentTree.serialize(this.refs.preview);

    // Continue to ignore unserializable props
    var serializableSnapshot =
        _.omit(snapshot, _.keys(this.state.fixtureUnserializableProps));

    this.setState({
      fixtureContents: serializableSnapshot,
      fixtureUserInput:
          this.constructor.getStringifiedFixtureContents(serializableSnapshot),
      isFixtureUserInputValid: true
    });
  },

_save(){
        let data = ComponentTree.serialize(this);
        console.log(JSON.stringify(data));
        for(var i = 0; i < data.state.childrenSet.length; i++) {
            data.state.childrenSet[i].x = data.state.children[""+i].x;
            data.state.childrenSet[i].y = data.state.children[""+i].y;
            data.state.childrenSet[i].height = data.state.children[""+i].height;
            data.state.childrenSet[i].width = data.state.children[""+i].width;
        }
        alert(JSON.stringify(data.state.childrenSet));
    }

getStateTree(componentRef) {
      return ReactComponentTree.serialize(componentRef).state;
    }

window._exportState = () => {
    return serialize(cart);
};
window._importState = (snapshot) => {

onUnload() {
    var snapshot = ComponentTree.serialize(this.refs.flatrisStatePreview);
    localStorage.setItem('flatrisState', JSON.stringify(snapshot.state));
  }
}