form part1

Author: arjun-sudo

react-forms/src/App.js

@@ -1,26 +1,45 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
- return (
- <div className="App">
- <header className="App-header">
- <img src={logo} className="App-logo" alt="logo" />
- <p>
- Edit <code>src/App.js</code> and save to reload.
- </p>
- <a
- className="App-link"
- href="https://reactjs.org"
- target="_blank"
- rel="noopener noreferrer"
- >
- Learn React
- </a>
- </header>
- </div>
- );
-}
+import React, {Component} from "react";
+
+class App extends Component{
+ constructor() {
+ super();
+ this.state={
+ firstName:"",
+ lastName:""
+ }
+ this.handleChange=this.handleChange.bind(this)
+
+
+ }
+ handleChange(event){
+ const {name,value}=event.target
+ this.setState({
+ [name]:value
+ })
+ }
+
 
-export default App;
+ render(){
+ return(
+ <form>
+ <input type="text"
+ value={this.state.firstName}
+ name="firstName"
+ placeholder="First Name"
+ onChange={this.handleChange} />
+ <br/>
+
+ <input type="text"
+ value={this.state.lastName}
+ name="lastName"
+ placeholder="Last Name"
+ onChange={this.handleChange} />
+
+ <h1>{this.state.firstName}{this.state.lastName}</h1>
+ </form>
+ )
+ }
+
+
+}
+export default App