d?(a.sortIndex=c,H(M,a),null===J(L)&&a===J(M)&&(S?h():S=!0,g(U,c-d))):(a.sortIndex=e,H(L,a),R||Q||(R=!0,f(V)));return a};\nexports.unstable_wrapCallback=function(a){var b=P;return function(){var c=P;P=b;try{return a.apply(this,arguments)}finally{P=c}}};\n","/** @license React v17.0.2\n * react-jsx-runtime.production.min.js\n *\n * Copyright (c) Facebook, Inc. and its affiliates.\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n'use strict';require(\"object-assign\");var f=require(\"react\"),g=60103;exports.Fragment=60107;if(\"function\"===typeof Symbol&&Symbol.for){var h=Symbol.for;g=h(\"react.element\");exports.Fragment=h(\"react.fragment\")}var m=f.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner,n=Object.prototype.hasOwnProperty,p={key:!0,ref:!0,__self:!0,__source:!0};\nfunction q(c,a,k){var b,d={},e=null,l=null;void 0!==k&&(e=\"\"+k);void 0!==a.key&&(e=\"\"+a.key);void 0!==a.ref&&(l=a.ref);for(b in a)n.call(a,b)&&!p.hasOwnProperty(b)&&(d[b]=a[b]);if(c&&c.defaultProps)for(b in a=c.defaultProps,a)void 0===d[b]&&(d[b]=a[b]);return{$$typeof:g,type:c,key:e,ref:l,props:d,_owner:m.current}}exports.jsx=q;exports.jsxs=q;\n"],"sourceRoot":""}
\ No newline at end of file
diff --git a/static/js/main.7163dfbc.chunk.js b/static/js/main.7163dfbc.chunk.js
deleted file mode 100644
index ee7e298..0000000
--- a/static/js/main.7163dfbc.chunk.js
+++ /dev/null
@@ -1,2 +0,0 @@
-(this["webpackJsonpreact-practice-name-age"]=this["webpackJsonpreact-practice-name-age"]||[]).push([[0],{10:function(e,t,c){"use strict";c.r(t);var n=c(1),a=c(3),r=c.n(a),i=(c(8),c(0));function s(){return Object(i.jsxs)("div",{className:"App",children:[Object(i.jsx)("h1",{children:"Hello CodeSandbox"}),Object(i.jsx)("h2",{children:"Start editing to see some magic happen!"})]})}var o=document.getElementById("root");r.a.render(Object(i.jsx)(n.StrictMode,{children:Object(i.jsx)(s,{})}),o)},8:function(e,t,c){}},[[10,1,2]]]);
-//# sourceMappingURL=main.7163dfbc.chunk.js.map
\ No newline at end of file
diff --git a/static/js/main.7163dfbc.chunk.js.map b/static/js/main.7163dfbc.chunk.js.map
deleted file mode 100644
index 3a896ec..0000000
--- a/static/js/main.7163dfbc.chunk.js.map
+++ /dev/null
@@ -1 +0,0 @@
-{"version":3,"sources":["App.js","index.js"],"names":["App","className","rootElement","document","getElementById","ReactDOM","render"],"mappings":"yLAEe,SAASA,IACtB,OACE,sBAAKC,UAAU,MAAf,UACE,mDACA,4ECDN,IAAMC,EAAcC,SAASC,eAAe,QAC5CC,IAASC,OACP,cAAC,aAAD,UACE,cAACN,EAAD,MAEFE,I","file":"static/js/main.7163dfbc.chunk.js","sourcesContent":["import \"./styles.css\";\n\nexport default function App() {\n return (\n \n
Hello CodeSandbox
\n Start editing to see some magic happen!
\n \n );\n}\n","import { StrictMode } from \"react\";\nimport ReactDOM from \"react-dom\";\n\nimport App from \"./App\";\n\nconst rootElement = document.getElementById(\"root\");\nReactDOM.render(\n \n \n ,\n rootElement\n);\n"],"sourceRoot":""}
\ No newline at end of file
diff --git a/static/js/main.add59003.chunk.js b/static/js/main.add59003.chunk.js
new file mode 100644
index 0000000..1d87604
--- /dev/null
+++ b/static/js/main.add59003.chunk.js
@@ -0,0 +1,2 @@
+(this["webpackJsonpreact-practice-name-age"]=this["webpackJsonpreact-practice-name-age"]||[]).push([[0],{16:function(e,a,t){},18:function(e,a,t){"use strict";t.r(a);var n=t(1),c=t.n(n),r=t(10),s=t.n(r),i=(t(16),t(8)),l=t(7),u=t(3),h=t(4),b=t(2),j=t(6),o=t(5),d=t(0),O=function(e){return Object(d.jsx)("div",{className:"wrapper",children:e.children})},m=function(e){Object(j.a)(t,e);var a=Object(o.a)(t);function t(e){var n;return Object(u.a)(this,t),(n=a.call(this,e)).changeHandler=n.changeHandler.bind(Object(b.a)(n)),n}return Object(h.a)(t,[{key:"changeHandler",value:function(e){this.props.onNameChange(e.target.value)}},{key:"render",value:function(){var e=this.props.value;return Object(d.jsxs)("p",{children:[Object(d.jsx)("label",{className:"form-label",children:"Name"}),Object(d.jsx)("br",{}),Object(d.jsx)("input",{type:"number",placeholder:"Age",value:e,onChange:this.changeHandler})]})}}]),t}(c.a.Component),g=function(e){Object(j.a)(t,e);var a=Object(o.a)(t);function t(e){var n;return Object(u.a)(this,t),(n=a.call(this,e)).changeHandler=n.changeHandler.bind(Object(b.a)(n)),n}return Object(h.a)(t,[{key:"changeHandler",value:function(e){this.props.onNameChange(e.target.value)}},{key:"render",value:function(){var e=this.props.value;return Object(d.jsxs)("p",{children:[Object(d.jsx)("label",{className:"form-label",children:"Name"}),Object(d.jsx)("br",{}),Object(d.jsx)("input",{type:"text",placeholder:"Name",value:e,onChange:this.changeHandler})]})}}]),t}(c.a.Component),p=t(11),v=function(e){Object(j.a)(t,e);var a=Object(o.a)(t);function t(){return Object(u.a)(this,t),a.apply(this,arguments)}return Object(h.a)(t,[{key:"displayData",value:function(e){var a=Object(p.a)(e,3),t=a[0],n=a[1],c=a[2];return Object(d.jsxs)("div",{className:"component-item",children:["Name: ",n,". Age: ",c]},t)}},{key:"render",value:function(){var e=this,a=this.props.data;return Object(d.jsx)("div",{className:"component-wrapper",children:a.map((function(a){return e.displayData(a)}))})}}]),t}(c.a.Component),f=function(e){Object(j.a)(t,e);var a=Object(o.a)(t);function t(){var e;return Object(u.a)(this,t),(e=a.call(this)).state={name:"",age:"",count:0,data:[]},e.changeHandler=e.changeHandler.bind(Object(b.a)(e)),e.submitHandler=e.submitHandler.bind(Object(b.a)(e)),e.nameChangeHander=e.nameChangeHander.bind(Object(b.a)(e)),e.ageChangeHander=e.ageChangeHander.bind(Object(b.a)(e)),e}return Object(h.a)(t,[{key:"changeHandler",value:function(e){var a=e.target,t=a.name,n=a.value;this.setState(Object(l.a)(Object(l.a)({},this.state),{},Object(i.a)({},t,n)))}},{key:"submitHandler",value:function(e){e.preventDefault();var a=this.state.data.slice();a.push([this.state.count,this.state.name,this.state.age]),console.log(a),this.setState((function(e){return Object(l.a)(Object(l.a)({},e),{},{count:e.count+1,name:"",age:"",data:a})}))}},{key:"nameChangeHander",value:function(e){this.setState({name:e})}},{key:"ageChangeHander",value:function(e){this.setState({age:e}),console.log(e)}},{key:"render",value:function(){return Object(d.jsxs)("div",{children:[Object(d.jsx)(O,{children:Object(d.jsxs)("form",{className:"form",onSubmit:this.submitHandler,children:[Object(d.jsx)(g,{value:this.state.name,onNameChange:this.nameChangeHander}),Object(d.jsx)(m,{value:this.state.age,onNameChange:this.ageChangeHander}),Object(d.jsx)("p",{children:Object(d.jsx)("button",{children:"Submit"})})]})}),Object(d.jsx)(v,{data:this.state.data})]})}}]),t}(c.a.Component),x=function(){return Object(d.jsx)(f,{})},H=document.getElementById("root");s.a.render(Object(d.jsx)(n.StrictMode,{children:Object(d.jsx)(x,{})}),H)}},[[18,1,2]]]);
+//# sourceMappingURL=main.add59003.chunk.js.map
\ No newline at end of file
diff --git a/static/js/main.add59003.chunk.js.map b/static/js/main.add59003.chunk.js.map
new file mode 100644
index 0000000..e56ceba
--- /dev/null
+++ b/static/js/main.add59003.chunk.js.map
@@ -0,0 +1 @@
+{"version":3,"sources":["Components/Card.js","Components/AgeInput.js","Components/NameInPut.js","Components/RenderComponent.js","Components/Form.js","App.js","index.js"],"names":["Card","props","className","children","AgeInput","changeHandler","bind","e","this","onNameChange","target","value","name","type","placeholder","onChange","React","Component","NameInput","RenderComponent","i","count","age","data","map","displayData","Form","state","submitHandler","nameChangeHander","ageChangeHander","event","setState","preventDefault","slice","push","console","log","prevState","onSubmit","App","rootElement","document","getElementById","ReactDOM","render"],"mappings":"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","file":"static/js/main.add59003.chunk.js","sourcesContent":["import React from \"react\";\n\nconst Card = (props) => {\n return {props.children}
;\n};\n\nexport default Card;\n","import React from \"react\";\n\nclass AgeInput extends React.Component {\n constructor(props) {\n super(props);\n this.changeHandler = this.changeHandler.bind(this);\n }\n changeHandler(e) {\n this.props.onNameChange(e.target.value);\n }\n\n render() {\n const name = this.props.value;\n return (\n \n \n
\n \n
\n );\n }\n}\n\nexport default AgeInput;\n","import React from \"react\";\nclass NameInput extends React.Component {\n constructor(props) {\n super(props);\n this.changeHandler = this.changeHandler.bind(this);\n }\n changeHandler(e) {\n this.props.onNameChange(e.target.value);\n }\n\n render() {\n const name = this.props.value;\n return (\n \n \n
\n \n
\n );\n }\n}\n\nexport default NameInput;\n","import React from \"react\";\nclass RenderComponent extends React.Component {\n displayData(i) {\n const [count, name, age] = i;\n return (\n \n Name: {name}. Age: {age}\n
\n );\n }\n render() {\n const data = this.props.data;\n return (\n \n {data.map((i) => this.displayData(i))}\n
\n );\n }\n}\n\nexport default RenderComponent;\n","import React from \"react\";\nimport Card from \"./Card\";\nimport AgeInput from \"./AgeInput\";\nimport NameInput from \"./NameInPut\";\nimport RenderComponent from \"./RenderComponent\";\n\nclass Form extends React.Component {\n constructor() {\n super();\n this.state = {\n name: \"\",\n age: \"\",\n count: 0,\n data: []\n };\n this.changeHandler = this.changeHandler.bind(this);\n this.submitHandler = this.submitHandler.bind(this);\n this.nameChangeHander = this.nameChangeHander.bind(this);\n this.ageChangeHander = this.ageChangeHander.bind(this);\n }\n\n changeHandler(event) {\n const { name, value } = event.target;\n this.setState({\n ...this.state,\n [name]: value\n });\n }\n\n submitHandler(event) {\n event.preventDefault();\n //this.state.age < 0 && alert(\"Age must be larger than 0\")\n //this.state.name === \"\" && alert(\"Cannot be empty\")\n //this.state.age === \"\" && alert(\"Cannot be empty\")\n //alert(\"Hello.My name is \" + this.state.name + \". I am \" + this.state.age + \" years old.\");\n let data = this.state.data.slice();\n data.push([this.state.count, this.state.name, this.state.age]);\n console.log(data);\n //this.data.push([\n // this.state.count, this.state.name, this.state.age\n //])\n\n this.setState((prevState) => {\n return {\n ...prevState,\n count: prevState.count + 1,\n name: \"\",\n age: \"\",\n data: data\n };\n });\n }\n\n nameChangeHander(e) {\n this.setState({\n name: e\n });\n }\n\n ageChangeHander(age) {\n this.setState({\n age: age\n });\n console.log(age);\n }\n\n render() {\n return (\n \n );\n }\n}\n\nexport default Form;\n","import \"./styles.css\";\nimport Form from \"./Components/Form\";\n\nconst App = () => {\n return ;\n};\n\nexport default App;\n","import { StrictMode } from \"react\";\nimport ReactDOM from \"react-dom\";\n\nimport App from \"./App\";\n\nconst rootElement = document.getElementById(\"root\");\nReactDOM.render(\n \n \n ,\n rootElement\n);\n"],"sourceRoot":""}
\ No newline at end of file