ReactJS Forms in One Video in Hindi

ReactJS Forms in One Video in Hindi 




Forms.js Component Source Code



import React, { Component } from 'react';
import './Form.css';

class Form extends Component{

constructor(props){
super(props);

this.state = {  fullname: "vinodthapa",
email: "Enter your email ID",
phone : "9876543211",
message : "DONATION FOR SUPPORT:    PhonePay = vinodbahadur@ybl      GooglePay: vbthapa55@oksbi
 Believe me, all this money will be used to make more quality videos and to make my channel grow. So that I can always provide you awesome free videos :)
"
}
}

// handlename = (event) => {
 
//  this.setState({ fullname: event.target.value })
// }

// handleemail = (event) => {
 
//  this.setState({ email: event.target.value })
// }

// handlenumber = (event) => {
 
//  this.setState({ number: event.target.value })
// }

// handlemessage = (event) => {
 
//  this.setState({ message: event.target.value })
// }

handlechangeall = (event) =>{
this.setState ( { [event.target.name] :event.target.value  } )
}

handlesubmit = (event) => {
alert (`my name is ${this.state.fullname}. 
My email id is ${this.state.email}
My mobile number is ${this.state.phone}.
My message to your company is ${this.state.message}
`);
// alert( JSON.stringify(this.state));
console.log( JSON.stringify(this.state));
event.preventDefault();
}

render(){
return(
<div>
<form onSubmit = {this.handlesubmit} >
<label> fullname </label>
<input  type="text" name="fullname"  value={this.state.fullname}  
onChange={this.handlechangeall} /> <br/>

<label> Email </label><br/>
<input  type="email" name="email" value= {this.state.email} 
onChange={this.handlechangeall} /> <br/>

<label> Mobile </label><br/>
<input  type="number" name="phone" value= {this.state.phone} 
        onChange={this.handlechangeall} /> <br/>

<label> Message </label>
<textarea  value= {this.state.message}  name="message"
        onChange={this.handlechangeall} />   <br/>

<input type="submit" value="Send" />
</form>
</div>
)
}

}

export default Form;

Form.css Source Code

input[type=text], input[type=email] , input[type=number] {
    width: 80%;
    padding: 5px 22px;
    margin: 10px 0px;
    box-sizing: border-box;  
    border: 2px solid #58B19F;

}

textarea {
    width: 80%;
    height: 50px;
    padding: 15px 22px;
    box-sizing: border-box;
    border: 2px solid #58B19F;
    border-radius: 2px;
    resize: none;  
}

input[type=submit] {
    background-color: #8842d5;
    border: none;
    color: white;
    padding: 8px 36px;
    text-decoration: none;
    border: 2px solid #ccc;
    margin: 5px 4px;
    cursor: pointer;  

}

Contact.js Component Source Code

import React from 'react';
import Form from './Form';
import './Contactstyle.css';


const Contact = () => {

return (
<div className="contactstyle">
<h2> Welcome to Contact page. </h2>
<br/>
<Form />
</div>
)
}


export default Contact;