SivanKarthick/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://fb.me/react-0.13.1.js"></script>
  <meta charset="utf-8">
  <title>React Hello World w/ JSBin</title>
</head>
<body>
  <div id="react_example"></div>
<script id="jsbin-javascript">
/**
 * Seems to be in line with this
 * http://stackoverflow.com/questions/24147331/react-the-right-way-to-pass-form-element-state-to-sibling-parent-elements
 * Now I have the state in parent and child. Is that good or bad? Why would I need it in child?
 * Could probably take that out
 * Another Example http://jsbin.com/pidipad/edit?js,output
 * */
"use strict";

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Parent = (function (_React$Component) {
  _inherits(Parent, _React$Component);

  function Parent(props) {
    var _this = this;

    _classCallCheck(this, Parent);

    _get(Object.getPrototypeOf(Parent.prototype), "constructor", this).call(this, props);

    this.onUpdate = function (val) {
      _this.setState({
        fieldVal: val
      });
    };

    this.state = {
      fieldVal: ""
    };
  }

  _createClass(Parent, [{
    key: "render",
    value: function render() {
      return React.createElement(
        "div",
        null,
        React.createElement(
          "h2",
          null,
          "Parent"
        ),
        "Value in Parent Component State: ",
        this.state.fieldVal,
        React.createElement("br", null),
        React.createElement(Child, { onUpdate: this.onUpdate }),
        React.createElement("br", null),
        React.createElement(OtherChild, { passedVal: this.state.fieldVal })
      );
    }
  }]);

  return Parent;
})(React.Component);

var Child = (function (_React$Component2) {
  _inherits(Child, _React$Component2);

  function Child(props) {
    var _this2 = this;

    _classCallCheck(this, Child);

    _get(Object.getPrototypeOf(Child.prototype), "constructor", this).call(this, props);

    this.update = function (e) {
      console.log(e.target.value);
      _this2.props.onUpdate(e.target.value);
      _this2.setState({ fieldVal: e.target.value });
    };

    this.state = {
      fieldVal: ""
    };
  }

  _createClass(Child, [{
    key: "render",
    value: function render() {
      return React.createElement(
        "div",
        null,
        React.createElement(
          "h4",
          null,
          "Child"
        ),
        React.createElement("input", {
          type: "text",
          placeholder: "type here",
          onChange: this.update,
          value: this.state.fieldVal
        })
      );
    }
  }]);

  return Child;
})(React.Component);

var OtherChild = (function (_React$Component3) {
  _inherits(OtherChild, _React$Component3);

  function OtherChild() {
    _classCallCheck(this, OtherChild);

    _get(Object.getPrototypeOf(OtherChild.prototype), "constructor", this).apply(this, arguments);
  }

  _createClass(OtherChild, [{
    key: "render",
    value: function render() {
      return React.createElement(
        "div",
        null,
        React.createElement(
          "h4",
          null,
          "OtherChild"
        ),
        "Value in OtherChild Props: ",
        this.props.passedVal
      );
    }
  }]);

  return OtherChild;
})(React.Component);

React.render(React.createElement(Parent, null), document.getElementById('react_example'));
</script>

<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//fb.me/react-0.13.1.js"><\/script>
  <meta charset="utf-8">
  <title>React Hello World w/ JSBin</title>
</head>
<body>
  <div id="react_example"></div>
</body>
</html></script>


<script id="jsbin-source-javascript" type="text/javascript">/**
 * Seems to be in line with this
 * http://stackoverflow.com/questions/24147331/react-the-right-way-to-pass-form-element-state-to-sibling-parent-elements
 * Now I have the state in parent and child. Is that good or bad? Why would I need it in child?
 * Could probably take that out
 * Another Example http://jsbin.com/pidipad/edit?js,output
 * */
class Parent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      fieldVal: ""
    }
  }

  onUpdate = (val) => {
    this.setState({
      fieldVal: val
    })
  };

  render() {
    return (
      <div>
        <h2>Parent</h2>
        Value in Parent Component State: {this.state.fieldVal}
        <br/>
        <Child onUpdate={this.onUpdate} />
        <br />
        <OtherChild passedVal={this.state.fieldVal} />
      </div>
    )
  }
}

class Child extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      fieldVal: ""
    }
  }

  update = (e) => {
    console.log(e.target.value);
    this.props.onUpdate(e.target.value);
    this.setState({fieldVal: e.target.value});
  };

  render() {
    return (
      <div>
        <h4>Child</h4>
        <input
          type="text"
          placeholder="type here"
          onChange={this.update}
          value={this.state.fieldVal}
        />
      </div>
    )
  }
}

class OtherChild extends React.Component {
  render() {
    return (
      <div>
        <h4>OtherChild</h4>
        Value in OtherChild Props: {this.props.passedVal}
      </div>
    )
  }
}


React.render(
  <Parent />,
  document.getElementById('react_example')
);</script></body>
</html>

## jsbin.tipixiy.js
/**
 * Seems to be in line with this
 * http://stackoverflow.com/questions/24147331/react-the-right-way-to-pass-form-element-state-to-sibling-parent-elements
 * Now I have the state in parent and child. Is that good or bad? Why would I need it in child?
 * Could probably take that out
 * Another Example http://jsbin.com/pidipad/edit?js,output
 * */
"use strict";

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var Parent = (function (_React$Component) {
  _inherits(Parent, _React$Component);

  function Parent(props) {
    var _this = this;

    _classCallCheck(this, Parent);

    _get(Object.getPrototypeOf(Parent.prototype), "constructor", this).call(this, props);

    this.onUpdate = function (val) {
      _this.setState({
        fieldVal: val
      });
    };

    this.state = {
      fieldVal: ""
    };
  }

  _createClass(Parent, [{
    key: "render",
    value: function render() {
      return React.createElement(
        "div",
        null,
        React.createElement(
          "h2",
          null,
          "Parent"
        ),
        "Value in Parent Component State: ",
        this.state.fieldVal,
        React.createElement("br", null),
        React.createElement(Child, { onUpdate: this.onUpdate }),
        React.createElement("br", null),
        React.createElement(OtherChild, { passedVal: this.state.fieldVal })
      );
    }
  }]);

  return Parent;
})(React.Component);

var Child = (function (_React$Component2) {
  _inherits(Child, _React$Component2);

  function Child(props) {
    var _this2 = this;

    _classCallCheck(this, Child);

    _get(Object.getPrototypeOf(Child.prototype), "constructor", this).call(this, props);

    this.update = function (e) {
      console.log(e.target.value);
      _this2.props.onUpdate(e.target.value);
      _this2.setState({ fieldVal: e.target.value });
    };

    this.state = {
      fieldVal: ""
    };
  }

  _createClass(Child, [{
    key: "render",
    value: function render() {
      return React.createElement(
        "div",
        null,
        React.createElement(
          "h4",
          null,
          "Child"
        ),
        React.createElement("input", {
          type: "text",
          placeholder: "type here",
          onChange: this.update,
          value: this.state.fieldVal
        })
      );
    }
  }]);

  return Child;
})(React.Component);

var OtherChild = (function (_React$Component3) {
  _inherits(OtherChild, _React$Component3);

  function OtherChild() {
    _classCallCheck(this, OtherChild);

    _get(Object.getPrototypeOf(OtherChild.prototype), "constructor", this).apply(this, arguments);
  }

  _createClass(OtherChild, [{
    key: "render",
    value: function render() {
      return React.createElement(
        "div",
        null,
        React.createElement(
          "h4",
          null,
          "OtherChild"
        ),
        "Value in OtherChild Props: ",
        this.props.passedVal
      );
    }
  }]);

  return OtherChild;
})(React.Component);

React.render(React.createElement(Parent, null), document.getElementById('react_example'));
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://fb.me/react-0.13.1.js"></script>
	<meta charset="utf-8">
	<title>React Hello World w/ JSBin</title>
	</head>
	<body>
	<div id="react_example"></div>
	<script id="jsbin-javascript">
	/**
	* Seems to be in line with this
	* http://stackoverflow.com/questions/24147331/react-the-right-way-to-pass-form-element-state-to-sibling-parent-elements
	* Now I have the state in parent and child. Is that good or bad? Why would I need it in child?
	* Could probably take that out
	* Another Example http://jsbin.com/pidipad/edit?js,output
	* */
	"use strict";

	var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable \|\| false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

	var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ("value" in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };

	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

	function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

	var Parent = (function (_React$Component) {
	_inherits(Parent, _React$Component);

	function Parent(props) {
	var _this = this;

	_classCallCheck(this, Parent);

	_get(Object.getPrototypeOf(Parent.prototype), "constructor", this).call(this, props);

	this.onUpdate = function (val) {
	_this.setState({
	fieldVal: val
	});
	};

	this.state = {
	fieldVal: ""
	};
	}

	_createClass(Parent, [{
	key: "render",
	value: function render() {
	return React.createElement(
	"div",
	null,
	React.createElement(
	"h2",
	null,
	"Parent"
	),
	"Value in Parent Component State: ",
	this.state.fieldVal,
	React.createElement("br", null),
	React.createElement(Child, { onUpdate: this.onUpdate }),
	React.createElement("br", null),
	React.createElement(OtherChild, { passedVal: this.state.fieldVal })
	);
	}
	}]);

	return Parent;
	})(React.Component);

	var Child = (function (_React$Component2) {
	_inherits(Child, _React$Component2);

	function Child(props) {
	var _this2 = this;

	_classCallCheck(this, Child);

	_get(Object.getPrototypeOf(Child.prototype), "constructor", this).call(this, props);

	this.update = function (e) {
	console.log(e.target.value);
	_this2.props.onUpdate(e.target.value);
	_this2.setState({ fieldVal: e.target.value });
	};

	this.state = {
	fieldVal: ""
	};
	}

	_createClass(Child, [{
	key: "render",
	value: function render() {
	return React.createElement(
	"div",
	null,
	React.createElement(
	"h4",
	null,
	"Child"
	),
	React.createElement("input", {
	type: "text",
	placeholder: "type here",
	onChange: this.update,
	value: this.state.fieldVal
	})
	);
	}
	}]);

	return Child;
	})(React.Component);

	var OtherChild = (function (_React$Component3) {
	_inherits(OtherChild, _React$Component3);

	function OtherChild() {
	_classCallCheck(this, OtherChild);

	_get(Object.getPrototypeOf(OtherChild.prototype), "constructor", this).apply(this, arguments);
	}

	_createClass(OtherChild, [{
	key: "render",
	value: function render() {
	return React.createElement(
	"div",
	null,
	React.createElement(
	"h4",
	null,
	"OtherChild"
	),
	"Value in OtherChild Props: ",
	this.props.passedVal
	);
	}
	}]);

	return OtherChild;
	})(React.Component);

	React.render(React.createElement(Parent, null), document.getElementById('react_example'));
	</script>

	<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
	<html>
	<head>
	<script src="//fb.me/react-0.13.1.js"><\/script>
	<meta charset="utf-8">
	<title>React Hello World w/ JSBin</title>
	</head>
	<body>
	<div id="react_example"></div>
	</body>
	</html></script>


	<script id="jsbin-source-javascript" type="text/javascript">/**
	* Seems to be in line with this
	* http://stackoverflow.com/questions/24147331/react-the-right-way-to-pass-form-element-state-to-sibling-parent-elements
	* Now I have the state in parent and child. Is that good or bad? Why would I need it in child?
	* Could probably take that out
	* Another Example http://jsbin.com/pidipad/edit?js,output
	* */
	class Parent extends React.Component {
	constructor(props) {
	super(props);

	this.state = {
	fieldVal: ""
	}
	}

	onUpdate = (val) => {
	this.setState({
	fieldVal: val
	})
	};

	render() {
	return (
	<div>
	<h2>Parent</h2>
	Value in Parent Component State: {this.state.fieldVal}
	<br/>
	<Child onUpdate={this.onUpdate} />
	<br />
	<OtherChild passedVal={this.state.fieldVal} />
	</div>
	)
	}
	}

	class Child extends React.Component {
	constructor(props) {
	super(props);

	this.state = {
	fieldVal: ""
	}
	}

	update = (e) => {
	console.log(e.target.value);
	this.props.onUpdate(e.target.value);
	this.setState({fieldVal: e.target.value});
	};

	render() {
	return (
	<div>
	<h4>Child</h4>
	<input
	type="text"
	placeholder="type here"
	onChange={this.update}
	value={this.state.fieldVal}
	/>
	</div>
	)
	}
	}

	class OtherChild extends React.Component {
	render() {
	return (
	<div>
	<h4>OtherChild</h4>
	Value in OtherChild Props: {this.props.passedVal}
	</div>
	)
	}
	}


	React.render(
	<Parent />,
	document.getElementById('react_example')
	);</script></body>
	</html>