src/index.js
//src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App />,
document.getElementById('root')
)
public/index.html
//public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>ReactJS </title>
</head>
<body>
<div id="root"></div>
</body>
</html>
src/App.js
App.js
//App.js
import 'bootstrap/dist/css/bootstrap.min.css';
import MultiStepForm from "./components/MultiStepForm";
import './App.css';
function App() {
return (
<div>
<MultiStepForm />
</div>
);
}
export default App;
SimpleForm.js
//SimpleForm.js
import React, { Component } from 'react';
import Container from 'react-bootstrap/Container';
import Form from 'react-bootstrap/Form';
class SimpleForm extends Component {
render() {
return (
<Container>
<Form>
<Form.Group controlId="form.Name">
<Form.Label>Name</Form.Label>
<Form.Control type="text" placeholder="Enter name" />
</Form.Group>
<Form.Group controlId="form.Email">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="name@example.com" />
</Form.Group>
<Form.Group controlId="form.Textarea">
<Form.Label>Comment</Form.Label>
<Form.Control as="textarea" rows={3} />
</Form.Group>
</Form>
</Container>
);
}
}
export default SimpleForm;
MultistepForm.js
//MultistepForm.js
import React, { Component } from 'react';
import UserDetails from "./UserDetails";
import AddressDetails from "./AddressDetails";
import Confirmation from "./Confirmation";
class MultiStepForm extends Component {
state = {
step: 1,
firstName: '',
lastName: '',
email: '',
address: '',
city: '',
state: '',
zip:'',
}
nextStep = () => {
const { step } = this.state
this.setState({
step : step + 1
})
}
prevStep = () => {
const { step } = this.state
this.setState({
step : step - 1
})
}
handleChange = (event) => {
this.setState({[event.target.name]: event.target.value})
}
render(){
const { step, firstName, lastName, email, address, city, state, zip } = this.state;
const inputValues = { firstName, lastName, email, address, city, state, zip };
switch(step) {
case 1:
return <UserDetails
nextStep={this.nextStep}
handleChange = {this.handleChange}
inputValues={inputValues}
/>
case 2:
return <AddressDetails
nextStep={this.nextStep}
prevStep={this.prevStep}
handleChange = {this.handleChange}
inputValues={inputValues}
/>
case 3:
return <Confirmation
nextStep={this.nextStep}
prevStep={this.prevStep}
inputValues={inputValues}
/>
}
}
}
export default MultiStepForm;
UserDetails.js
//UserDetails.js
import React, { Component } from 'react';
import { Form, Button, Col, Container } from 'react-bootstrap';
class UserDetails extends Component{
back = (e) => {
e.preventDefault();
this.props.prevStep();
}
saveAndContinue = (e) => {
e.preventDefault();
this.props.nextStep();
};
render() {
return( <Container>
<Form>
<Form.Row>
<Form.Group as={Col} controlId="formFirstName">
<Form.Label className="label">First Name</Form.Label>
<Form.Control
type="text"
defaultValue={this.props.inputValues.firstName}
name="firstName"
required
onChange={this.props.handleChange}
/>
</Form.Group>
<Form.Group as={Col} controlId="formLastName">
<Form.Label className="label">Last Name</Form.Label>
<Form.Control
type="text"
defaultValue={this.props.inputValues.lastName}
name="lastName"
required
onChange={this.props.handleChange}
/>
</Form.Group>
</Form.Row>
<Form.Group controlId="formEmail">
<Form.Label className="label">Email Address</Form.Label>
<Form.Control
type="email"
defaultValue={this.props.inputValues.email}
name="email"
required
onChange={this.props.handleChange}
/>
</Form.Group>
<Button variant="primary" onClick={this.saveAndContinue}>Next</Button>
</Form>
</Container>
);
}
}
export default UserDetails;
AddressDetails.js
//AddressDetails.js
import React, { Component } from 'react';
import { Form, Button, Col, Container } from 'react-bootstrap';
class AddressDetails extends Component{
back = (e) => {
e.preventDefault();
this.props.prevStep();
}
saveAndContinue = (e) => {
e.preventDefault();
this.props.nextStep();
};
render() {
return( <Container>
<Form>
<Form.Group controlId="formAddress">
<Form.Label>Address</Form.Label>
<Form.Control
type="text"
defaultValue={this.props.inputValues.address}
name="address"
required
onChange={this.props.handleChange}
/>
</Form.Group>
<Form.Row>
<Form.Group as={Col} controlId="formCity">
<Form.Label>City</Form.Label>
<Form.Control
type="text"
defaultValue={this.props.inputValues.city}
name="city"
required
onChange={this.props.handleChange}
/>
</Form.Group>
<Form.Group as={Col} controlId="formState">
<Form.Label>State</Form.Label>
<Form.Control as="select" name="state" defaultValue={this.props.inputValues.state} onChange={this.props.handleChange}>
<option value="AL">Alabama</option>
<option value="AK">Alaska</option>
<option value="AZ">Arizona</option>
</Form.Control>
</Form.Group>
<Form.Group as={Col} controlId="formZip">
<Form.Label>Zip</Form.Label>
<Form.Control
type="text"
defaultValue={this.props.inputValues.zip}
name="zip"
required
onChange={this.props.handleChange}
/>
</Form.Group>
</Form.Row>
<Button variant="secondary" onClick={this.back}>Back</Button>{' '}
<Button variant="primary" onClick={this.saveAndContinue}>Next</Button>
</Form>
</Container>
);
}
}
export default AddressDetails;
Confirmation.js
//Confirmation.js
import React, { Component } from 'react';
import { Button, Container } from 'react-bootstrap';
class Confirmation extends Component{
back = (e) => {
e.preventDefault();
this.props.prevStep();
}
saveAndContinue = (e) => {
e.preventDefault();
this.props.nextStep();
};
render(){
const {inputValues: { firstName, lastName, email, address, city, state, zip }} = this.props;
return(
<Container>
<h1>Confirm your Details</h1>
<p>Confirm if the following details are correct.</p>
<p>First Name: {firstName}</p>
<p>Last Name: {lastName}</p>
<p>Email: {email}</p>
<p>Adress: {address}</p>
<p>City: {city}</p>
<p>State: {state}</p>
<p>Zip: {zip}</p>
<Button variant="secondary" onClick={this.back}>Back</Button>{' '}
<Button variant="primary">Confirm</Button>
</Container>
)
}
}
export default Confirmation;
