shubhang93/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0-alpha.2/umd/react.development.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0-alpha.2/umd/react-dom.development.js"></script>
	<div id="app"></div>
<script id="jsbin-javascript">
"use strict";

var _slicedToArray = (function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; })();

var _React = React;
var useState = _React.useState;
var useEffect = _React.useEffect;

var useForm = function useForm(initialValue) {
	var _useState = useState(initialValue);

	var _useState2 = _slicedToArray(_useState, 2);

	var field = _useState2[0];
	var setField = _useState2[1];

	var onFieldChange = function onFieldChange(evt) {
		var val = evt.target.value;
		setField(val);
	};

	return [field, onFieldChange];
};

var App = function App(props) {
	var _useForm = useForm("");

	var _useForm2 = _slicedToArray(_useForm, 2);

	var name = _useForm2[0];
	var setName = _useForm2[1];

	useEffect(function () {
		return console.log("Name ==> " + name);
	});

	return React.createElement("input", { value: name, placeholder: "name", onChange: setName });
};

ReactDOM.render(React.createElement(App, { name: "Velosity" }), document.getElementById("app"));
</script>


<script id="jsbin-source-javascript" type="text/javascript">const{useState,useEffect}=React


const useForm=function(initialValue){
	const[field,setField]=useState(initialValue)

	const onFieldChange=function(evt){
		let val = evt.target.value
		setField(val)
	}

	return [field,onFieldChange]

}


const App = function(props){

	const[name,setName]=useForm("")

	useEffect(()=>console.log("Name ==> "+name))

	return (
      <input value={name} placeholder="name" onChange={setName}/>
	)
}


ReactDOM.render(<App name={"Velosity"}/>,document.getElementById("app"))</script></body>
</html>

## jsbin.untitled.js
"use strict";

var _slicedToArray = (function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; })();

var _React = React;
var useState = _React.useState;
var useEffect = _React.useEffect;

var useForm = function useForm(initialValue) {
	var _useState = useState(initialValue);

	var _useState2 = _slicedToArray(_useState, 2);

	var field = _useState2[0];
	var setField = _useState2[1];

	var onFieldChange = function onFieldChange(evt) {
		var val = evt.target.value;
		setField(val);
	};

	return [field, onFieldChange];
};

var App = function App(props) {
	var _useForm = useForm("");

	var _useForm2 = _slicedToArray(_useForm, 2);

	var name = _useForm2[0];
	var setName = _useForm2[1];

	useEffect(function () {
		return console.log("Name ==> " + name);
	});

	return React.createElement("input", { value: name, placeholder: "name", onChange: setName });
};

ReactDOM.render(React.createElement(App, { name: "Velosity" }), document.getElementById("app"));
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>JS Bin</title>
	</head>

	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0-alpha.2/umd/react.development.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0-alpha.2/umd/react-dom.development.js"></script>
	<div id="app"></div>
	<script id="jsbin-javascript">
	"use strict";

	var _slicedToArray = (function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; })();

	var _React = React;
	var useState = _React.useState;
	var useEffect = _React.useEffect;

	var useForm = function useForm(initialValue) {
	var _useState = useState(initialValue);

	var _useState2 = _slicedToArray(_useState, 2);

	var field = _useState2[0];
	var setField = _useState2[1];

	var onFieldChange = function onFieldChange(evt) {
	var val = evt.target.value;
	setField(val);
	};

	return [field, onFieldChange];
	};

	var App = function App(props) {
	var _useForm = useForm("");

	var _useForm2 = _slicedToArray(_useForm, 2);

	var name = _useForm2[0];
	var setName = _useForm2[1];

	useEffect(function () {
	return console.log("Name ==> " + name);
	});

	return React.createElement("input", { value: name, placeholder: "name", onChange: setName });
	};

	ReactDOM.render(React.createElement(App, { name: "Velosity" }), document.getElementById("app"));
	</script>



	<script id="jsbin-source-javascript" type="text/javascript">const{useState,useEffect}=React


	const useForm=function(initialValue){
	const[field,setField]=useState(initialValue)

	const onFieldChange=function(evt){
	let val = evt.target.value
	setField(val)
	}

	return [field,onFieldChange]

	}


	const App = function(props){

	const[name,setName]=useForm("")

	useEffect(()=>console.log("Name ==> "+name))

	return (
	<input value={name} placeholder="name" onChange={setName}/>
	)
	}





	ReactDOM.render(<App name={"Velosity"}/>,document.getElementById("app"))</script></body>
	</html>