In this tutorial, you will build a multistep registration form with React and Semantic UI.
https://react.semantic-ui.com/
src/index.js
//src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import 'semantic-ui-css/semantic.min.css';
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
//src/App.js
import React, { Component } from 'react';
import { Grid } from 'semantic-ui-react';
import Main from './components/Main';
class App extends Component {
render() {
return (
<div>
<p><h1>ReactJS Multistep Forms With Semantic UI</h1></p>
<Grid>
<Grid.Row columns={3}>
<Grid.Column></Grid.Column>
<Grid.Column>
<Main />
</Grid.Column>
<Grid.Column></Grid.Column>
</Grid.Row>
</Grid>
</div>
);
}
}
export default App;
src/Components/Main.js
/src/Components/Main.js
import React, { Component } from 'react';
import UserDetails from './UserDetails';
import PersonalDetails from './PersonalDetails';
import Confirmation from './Confirmation';
import Success from './Success';
class Main extends React.Component {
state = {
step: 1,
firstName: '',
lastName: '',
email: '',
age: '',
city: '',
country: ''
}
nextStep = () => {
const { step } = this.state
this.setState({
step : step + 1
})
}
prevStep = () => {
const { step } = this.state
this.setState({
step : step - 1
})
}
handleChange = input => event => {
this.setState({[input]: event.target.value})
}
render() {
const { step } = this.state;
const { firstName, lastName, email, age, city, country } = this.state;
const values = { firstName, lastName, email, age, city, country };
switch(step) {
case 1:
return <UserDetails
nextStep={this.nextStep}
handleChange = {this.handleChange}
values={values}
/>
case 2:
return <PersonalDetails
nextStep={this.nextStep}
prevStep={this.prevStep}
handleChange = {this.handleChange}
values={values}
/>
case 3:
return <Confirmation
nextStep={this.nextStep}
prevStep={this.prevStep}
values={values}
/>
case 4:
return <Success />
}
}
}
export default Main;
src/components/UserDetails.js
//src/components/UserDetails.js
import React, { Component } from 'react';
import { Grid, Header, Segment, Form, Button } from 'semantic-ui-react';
class UserDetails extends Component {
saveAndContinue = (e) => {
e.preventDefault();
this.props.nextStep();
}
render() {
const { values } = this.props;
return (
<Grid.Column style={{ maxWidth: 450 }}>
<Header textAlign='center'>
<h1>Enter User Details</h1>
</Header>
<Form>
<Segment>
<Form.Field>
<label>First Name</label>
<input
placeholder='First Name'
onChange={this.props.handleChange('firstName')}
defaultValue={values.firstName}
/>
</Form.Field>
<Form.Field>
<label>Last Name</label>
<input
placeholder='Last Name'
onChange={this.props.handleChange('lastName')}
defaultValue={values.lastName}
/>
</Form.Field>
<Form.Field>
<label>Email Address</label>
<input
type='email'
placeholder='Email Address'
onChange={this.props.handleChange('email')}
defaultValue={values.email}
/>
</Form.Field>
</Segment>
<Segment>
<Button onClick={this.saveAndContinue}>Save And Continue</Button>
</Segment>
</Form>
</Grid.Column>
);
}
}
export default UserDetails;
src/components/PersonalDetails.js
//src/components/PersonalDetails.js
import React, { Component } from 'react';
import { Grid, Header, Segment, Form, Button } from 'semantic-ui-react';
class PersonalDetails extends Component {
saveAndContinue = (e) => {
e.preventDefault();
this.props.nextStep();
}
back = (e) => {
e.preventDefault();
this.props.prevStep();
}
render() {
const { values } = this.props;
return (
<Grid.Column style={{ maxWidth: 450 }}>
<Header textAlign='center'>
<h1>Enter Personal Details</h1>
</Header>
<Form>
<Segment>
<Form.Field>
<label>Age</label>
<input placeholder='Age'
onChange={this.props.handleChange('age')}
defaultValue={values.age}
/>
</Form.Field>
<Form.Field>
<label>City</label>
<input placeholder='City'
onChange={this.props.handleChange('city')}
defaultValue={values.city}
/>
</Form.Field>
<Form.Field>
<label>Country</label>
<input placeholder='Country'
onChange={this.props.handleChange('country')}
defaultValue={values.country}
/>
</Form.Field>
</Segment>
<Segment textAlign='center'>
<Button onClick={this.back}>Back</Button>
<Button onClick={this.saveAndContinue}>Save And Continue</Button>
</Segment>
</Form>
</Grid.Column>
)
}
}
export default PersonalDetails;
src/components/Confirmation.js
//src/components/Confirmation.js
import React, { Component } from 'react';
import { Grid, Header, Segment, Button, List } from 'semantic-ui-react';
class Confirmation extends Component {
saveAndContinue = (e) => {
e.preventDefault();
this.props.nextStep();
}
back = (e) => {
e.preventDefault();
this.props.prevStep();
}
render() {
const { values: { firstName, lastName, email, age, city, country } } = this.props;
return (
<Grid.Column style={{ maxWidth: 450 }}>
<Header textAlign='center'>
<h1>Confirm your Details</h1>
<p>Click Confirm if the following details have been correctly entered</p>
</Header>
<Segment>
<List divided relaxed>
<List.Item>
<List.Icon name='users' size='large' />
<List.Content>First Name: {firstName}</List.Content>
</List.Item>
<List.Item>
<List.Icon name='users' size='large' />
<List.Content>Last Name: {lastName}</List.Content>
</List.Item>
<List.Item>
<List.Icon name='mail' size='large' />
<List.Content>Email: {email}</List.Content>
</List.Item>
<List.Item>
<List.Icon name='calendar' size='large' />
<List.Content>Age: {age}</List.Content>
</List.Item>
<List.Item>
<List.Icon name='marker' size='large' />
<List.Content>Location: {city}, {country}</List.Content>
</List.Item>
</List>
</Segment>
<Segment textAlign='center'>
<Button onClick={this.back}>Back</Button>
<Button onClick={this.saveAndContinue}>Confirm</Button>
</Segment>
</Grid.Column>
)
}
}
export default Confirmation;
src/Success.js
//src/Success.js
import React, { Component } from 'react';
import { Grid, Header } from 'semantic-ui-react';
class Success extends Component {
render() {
return (
<Grid.Column style={{ maxWidth: 450 }}>
<Header textAlign='center'>
<h1>Details Successfully Saved</h1>
</Header>
</Grid.Column>
)
}
}
export default Success;
