Handling Multiple Form Inputs in React

React is an open-source front-end Javascript library used for building user interfaces, especially Single Page Applications(SPAs). React popularly holds the View layer of the MVC(Model-View-Controller) architecture. Provided is the tutorial for creating an application handling HTML form multiple inputs in React by using popular Vite build tool :

There are prerequisites of having installed VS Code(or any editor of choice), Nodejs runtime and being initiated a project. Highlighted is the link for installing the Nodejs runtime and initiating a project.

1. Creating Vite react-form-tutorial project

Next it requires following the options as selected in below image

Next it requires navigating to the directory as in below image, and installing the dependencies using npm install command

Next it requires running app from terminal using npm run dev command and checking if the app works

For checking if the initial code works, after running the npm run dev command, next the link localhost:5173 is to be checked and the initial success output can be seen similar to output provided in below image

2. Next VS Code a popular editor is to be opened, the generated react project directory is to be added to the workspace in the VS Code editor like in below image, application content files and directories can be seen similar to contents in below image

3. Next App.jsx file is to be opened up and the file content can be seen similar to code in below image

Next the App.jsx file content is to be reduced to minimum as in below image

Next it requires removing the index.css CSS content

4. Below is the provided simple React code for handling the Shipping Details Form 

import { useState } from 'react'

function App() {

const [shippingForm, setShippingForm] = useState({});

const handleChange = e => {

setShippingForm({ ...shippingForm, [e.target.name]: e.target.value })

}

return (

<>

<h3>Shipping Details</h3>

<form onSubmit={e => { e.preventDefault(); console.log(shippingForm); }}>

<label>First Name</label>

<input

type="text"

name="firstname"

value={shippingForm.firstname}

onChange={handleChange} /> <br /> <br />

<label>Last Name</label>

<input

type="text"

name="lastname"

value={shippingForm.lastname}

onChange={handleChange} /> <br /> <br />

<label>Address</label>

<input

type="text"

name="address"

value={shippingForm.address}

onChange={handleChange} /> <br /> <br />

<label>City</label>

<input

type="text"

name="city"

value={shippingForm.city}

onChange={handleChange} /> <br /> <br />

<label>State</label>

<input

type="text"

name="state"

value={shippingForm.state}

onChange={handleChange} /> <br /> <br />

<label>Country</label>

<input

type="text"

name="country"

value={shippingForm.country}

onChange={handleChange} /> <br /> <br />

<input type="submit" />

</form>

</>

)

}

export default App

5. Shipping Details form can be seen similar to Form in below image once the file App.jsx is edited

Once the form is submitted, the form content can be seen in the console log similar to output as in below image