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;