React Base Fiddle (JSX)

Starting point for creating JSFiddles with React. This uses React with Addons.

by Evgeniy Lukovsky

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-with-addons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="container">
  <!-- This element's contents will be replaced with your component. -->
</div>

JavaScript 1.7

var object = {
  test: {
    name: 'Vladimir'
  },
  array: [
    {name: 'name'}
  ]
};

var Child = React.createClass({
  render: function() {
    return(<input onChange={this.props.onchange} name={this.props.prefix+'[name]'}/>);
  }
})

var ArrayOf = React.createClass({
	render: function(){
    var type=this.props.type;
    var prefix=this.props.prefix;
    var onchange=this.props.onchange;
  	return(
      <div>
        {this.props.array.map(function(i, ind){
          return(<Child prefix={prefix+'['+ind+']'} value={i} key={i} onchange={onchange}/>);
        })}
      </div>
    );
  }
})

var Root = React.createClass({
  getInitialState: function() {
    var initObject = this.props.initObject || {};
    return initObject;
  },
  handleAnyChange: function(e) {
    console.log(e.target, e.target.name, this);
    let path = e.target.name.split(/\[|(?:\]\[)|\]/g).filter(function(i){return !!i || i===0});
    this.updateState(path, e.target.value);
  },
  updateState: function(path, value){
  	let state = this.state;
    let copy = state;
    var lastField = path.pop();
    for(let field of path) {
       copy = copy[field];
    }
    copy[lastField] = value;
    this.setState(state);
  },
  render: function() {
    return (
      <div>
        <p> List input </p>
        <ArrayOf type='Child' onchange={this.handleAnyChange} array={object.array} prefix='array'/>
        <p> Child input </p>
        <Child onchange={this.handleAnyChange} prefix="test"/>
        <p>{JSON.stringify(this.state)}</p>
      </div>
    );
  }
});

ReactDOM.render( <Root initObject={object}/>,
  document.getElementById('container')
);