Tutorials
Handling forms in React
As a web developer, you have probably interacted with HTML forms. Forms provide an interface for us to collect data from users and then perform various actions using that data. For example, a signup form collects registration data such as email, name and password from users and creates accounts for them.
In this article, we will learn how to handle forms using ReactJs. This article assumes that you have basic knowledge of ReactJs and React Hooks.
import React, { useState } from 'react';
function App() {
var [data,setData] = useState({name:"",
email:""});
var handleChange = e =>{
var name = e.target.name;
var value = e.target.value;
setData({...data, [name]:value})
}
var handleSubmit = e =>{
e.preventDefault()
alert(data)
}
return (
<div>
<form method="post"
onSubmit={handleSubmit}>
<h2>Contact</h2>
<input
type="text"
name="name"
onChange={handleChange}
value={data.name}
/>
<input
type="email"
name="email"
onChange={handleChange}
value={data.email}
/>
<button>Submit</button>
<p>
{data.name},{data.email}
</p>
</form>
</div>
);
}
export default App;
Find Out detailed information about form submession
import React, { useState } from "react";
export default function App() {
var [data, setData] = useState({ name: "", email: "", number: "" });
function handleChange(e) {
var name = e.target.name;
var value = e.target.value;
setData({ ...data, [name]: value });
}
function handleSubmit(e) {
e.preventDefault();
console.log(data);
}
return (
<div>
<p>
{data.name} {data.email} {data.number}
</p>
<form method="post" onSubmit={handleSubmit}>
userName :{" "}
<input
type="text"
name="name"
onChange={handleChange}
value={data.name}
/>
EMail :{" "}
<input
type="email"
name="email"
onChange={handleChange}
value={data.email}
/>
Mobile Number :{" "}
<input
type="number"
name="number"
onChange={handleChange}
value={data.number}
/>
<button>Submit</button>
</form>
</div>
);
}
