React Form submission using arrow functions

Arrow functions were introduced with ES6 (ECMAScript 6). Generally, the arrow function declared by a constant variable.

syntax

const function_name = () => {

return(<content>)

}

Case Study

This is a simple form that collects student data. React works with components, which are reusable, and independent code blocks, which returns HTML code block. This example contains two components. Which are a header component and a student form component.

Figure 1

Figure 2

Adding header components

Figure 3

Header.js

const Header = () => {
return (
<div className=’form-topic’>
Student Details
</div>
)
}

export default Header

App.js

import Header from ‘./components/Header’;

function App() {
return (
<div>
<Header />
</div>
)
}

Now header component was added. Then let’s create the student form component.

Figure 4

StudentForm.js

import { useState } from ‘react’

const StudentForm = ({ FormData }) => {

const [name, setName] = useState(‘’)
const [age, setAge] = useState(‘’)
const [address1, setAddress1] = useState(‘’)
const [address2, setAddress2] = useState(‘’)
const [city, setCity] = useState(‘’)
const [course, setCourse] = useState(‘’)
const AddFormData = (e) => {
e.preventDefault()
FormData({ name, age, address1, address2, city, course })
setName(‘’)
setAddress1(‘’)
setAddress2(‘’)
setCity(‘’)
setCourse(‘’)
}
return (
<form onSubmit={AddFormData}>
<div class=”form-group row”>
<label for=”name” class=”col-sm-2 col-form-label”>Name</label>
<div class=”col-sm-10">
<input type=”text” class=”form-control” id=”name” value={name} onChange={(e) => setName(e.target.value)}/>
</div>
</div>
<div class=”form-group row”>
<label for=”age” class=”col-sm-2 col-form-label”>Age</label>
<div class=”col-sm-10">
<input type=”text” class=”form-control” id=”age” value={age} onChange={(e) => setAge(e.target.value)}/>
</div>
</div>
<div class=”form-group row”>
<label for=”Address1" class=”col-sm-2 col-form-label”>Address1</label>
<div class=”col-sm-10">
<input type=”text” class=”form-control” id=”Address1" value={address1} onChange={(e) => setAddress1(e.target.value)}/>
</div>
</div>
<div class=”form-group row”>
<label for=”Address2" class=”col-sm-2 col-form-label”>Address2</label>
<div class=”col-sm-10">
<input type=”text” class=”form-control” id=”Address2" value={address2} onChange={(e) => setAddress2(e.target.value)}/>
</div>
</div>
<div class=”form-group row”>
<label for=”City” class=”col-sm-2 col-form-label”>City</label>
<div class=”col-sm-10">
<input type=”text” class=”form-control” id=”City” value={city} onChange={(e) => setCity(e.target.value)}/>
</div>
</div>
<div class=”form-group row”>
<label for=”Course” class=”col-sm-2 col-form-label”>Course</label>
<div class=”col-sm-10">
<input type=”text” class=”form-control” id=”Course” value={course} onChange={(e) => setCourse(e.target.value)}/>
</div>
</div>
<button type=”submit” class=”btn btn-primary”>Submit</button>
</form>
)
}
export default StudentForm

App.js

import ‘./App.css’;
import Header from ‘./components/Header’;
import StudentForm from ‘./components/StudentForm’;

function App() {

const getFormData=(Student) => {
console.log(Student)
}

return (
<div className=’container’>
<Header />
<StudentForm FormData={getFormData}/>
</div>
)
}

export default App;

React pass the getFormData function with the child component. which function gets the student form data and print it in a console.

const getFormData=(Student) => {
console.log(Student)
}

<StudentForm FormData={getFormData}/>

StudentForm function in StudentForm.js gets the passed getFormData function as a parameter.

const StudentForm = ({ FormData })

Inside the “StudentForm” function declared the new state variables.

const [name, setName] = useState(‘’)
const [age, setAge] = useState(‘’)
const [address1, setAddress1] = useState(‘’)
const [address2, setAddress2] = useState(‘’)
const [city, setCity] = useState(‘’)
const [course, setCourse] = useState(‘’)

And set the values by inputs on change

onChange={(e) => setName(e.target.value)}

After the form submission values bind to the getFormData function.

const AddFormData = (e) => {
e.preventDefault()
FormData({ name, age, address1, address2, city, course })
}

GitHub URL: https://github.com/KavinduGayan/student-form-arrow-function.git