Form Container
In this example process From data on real-time as user enter or select any option of given form, pass the value in URL and show the option in another section. In this example we will create Stateful component and this example gives an idea how onChange even works in React JS.
Prepare Project for Simple Form
To create the example project for this example, open command prompt, navigate to a convenient location, and run the command as shown below :
create-react-app example12
src\App.js
import React, { Component } from "react";
import FormContainer from "./FormContainer";
function App() {
return <FormContainer />;
}
export default App;
src\FormContainer.js
import React, { Component } from "react";
import FormComponent from "./FormComponent";
class App extends Component {
constructor() {
super();
this.state = {
firstName: "",
lastName: "",
age: "",
gender: "",
destination: "",
nutsFree: false,
lactoseFree: false,
isVegan: false
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
const { value, name, type, checked } = e.target;
type === "checkbox"
? this.setState({ [name]: checked })
: this.setState({ [name]: value });
}
render() {
return <FormComponent handleChange={this.handleChange} {...this.state} />;
}
}
export default App;
src\FormComponent.js
import React from "react";
function FormComponent(props) {
return (
<main>
<h1>Sample form</h1>
<form className="inputForm">
<input
className="text"
onChange={props.handleChange}
name="firstName"
placeholder="First Name"
value={props.firstName}
/>
<br />
<input
className="text"
onChange={props.handleChange}
name="lastName"
placeholder="Last Name"
value={props.lastName}
/>
<br />
<input
className="text"
onChange={props.handleChange}
name="age"
placeholder="Age"
value={props.age}
/>
<br />
<br />
<label>
<input
className="radiobutton"
type="radio"
name="gender"
value="male"
checked={props.gender === "male"}
onChange={props.handleChange}
/>
Male
</label>
<label>
<br />
<input
className="radiobutton"
type="radio"
name="gender"
value="female"
checked={props.gender === "female"}
onChange={props.handleChange}
/>
Female
</label>
<br />
<label className="destination-header">Select your destination</label>
<br />
<select
className="destination-input"
onChange={props.handleChange}
name="destination"
value={props.destination}
>
<option value="">-- Please Choose a destination --</option>
<option value="Thailand">Thailand</option>
<option value="Japan">Japan</option>
<option value="Brazil">Brazil</option>
</select>
<br />
<br />
<label className="restrictions-title">Dietary restrictions:</label>
<br />
<div className="restrictions">
<input
type="checkbox"
name="nutsFree"
onChange={props.handleChange}
checked={props.nutsFree}
/>
<span>Nuts free</span>
<br />
<input
type="checkbox"
name="lactoseFree"
onChange={props.handleChange}
checked={props.lactoseFree}
/>
<span>Lactose free</span>
<br />
<input
type="checkbox"
name="isVegan"
onChange={props.handleChange}
checked={props.isVegan}
/>
<span>Vegan</span>
</div>
<button className="submit">Submit</button>
</form>
<hr />
<div className="entered-info">
<h2>Entered information:</h2>
<p>
Your name: {props.firstName} {props.lastName}
</p>
<p>Your age: {props.age}</p>
<p>Your gender: {props.gender}</p>
<p>Your destination: {props.destination}</p>
<p>Your dietary restrictions: </p>
<div className="restrictions">
<span>**Nuts free : {props.nutsFree ? " Yes" : "No"}</span> <br />
<span>**Lactose free : {props.lactoseFree ? " Yes" : "No"}</span>{" "}
<br />
<span>**Vegan meal : {props.isVegan ? " Yes" : "No"}</span>
</div>
</div>
</main>
);
}
export default FormComponent;
src\App.css
Replace the placeholder content of App.css with given below content :
.inputForm{
background-color: burlywood;
margin:0;
}
h1{
background-color:rgb(59, 54, 54);
color:white;
padding:10px;
margin:0
}
.text{
margin:8px 0;
margin-left:10px;
width:50%;
border-radius: 3px;
height:25px;
font-weight: bold;
}
.radiobutton{
margin-left:10px;
height:20px;
}
.destination-header{
font-weight: 600;
margin:10px;
}
.destination-input{
margin-left:10px;
font-weight: bold;
}
.restrictions-title{
margin-left: 10px;
font-weight: 600;
}
.restrictions{
margin-left:10px;
}
.submit{
padding:10px;
width:100px;
margin:10px;
position: relative;
left:10px;
font-weight: 700;
font-size: 14px;
}
.entered-info{
background-color: rgb(30, 85, 85);
color:white;
}
.entered-info h2{
margin:10px;
padding:10px;
font-weight: 650;
}
.entered-info p{
font-size: 18px;
margin-left:20px;
font-style: oblique
}
.restrictions{
margin-left:30px;
padding-bottom: 25px;
}