(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.fe5ca5d7.chunk.js.map