Basics of Form Handling Class Component

Class Form

 import React, { Component } from 'react';

import ReactDOM from 'react-dom';

 

export default class Welcome extends Component{

  constructor(props){

    super(props);

    this.state = {

      username:'',

      address:'',

      topic:''

    }

  }

  handleusername=(e) =>{

this.setState({

  username:e.target.value

})

  }

handleaddress=(e) =>{

this.setState({

address:e.target.value

})

}

handletopic=(e) =>{

  this.setState({

    topic:e.target.value

  })

    }

    handleSubmit=(e)=>{

      alert(`${this.state.username} ${this.state.address} ${this.state.topic}`);

     e.preventDefault()

     console.warn(this.state.username)

    }

render(){

  return(

    <>

    <form onSubmit={this.handleSubmit}>

      <div>

      <label>User name</label>

      <input value={this.state.username} type="text" onChange={this.handleusername}/>

      </div>

      

      <div>

      <label>Address</label>

      <input value={this.state.address} type="text" onChange={this.handleaddress}/>

      </div>

      <div>

      <label>Topic</label>

 

 <select value={this.state.value} onChange={this.handletopic}> 

   <option value="Html">Html</option>

   <option value="CSS">CSS</option>

   <option value="Angulr">Angular</option>

 </select>

 

       </div>

<button type="submit">Submit</button>

    </form>

     </>

  )

}

}

ReactDOM.render( <Welcome/>,

document.getElementById('root')

);