import React, { useState } from "react";
function Form() {
const [user, setUser] = useState({
name: "",
email: "",
password: "",
});
const { name, email, password } = user;
const handleChange = (e) => {
const { name, value } = e.target;
setUser({
...user,
[name]: value,
});
};
const handleSubmit = (e) => {
e.preventDefault();
console.log("Form Submitted");
console.log(user);
};
return (
<div>
<h1>Registraction</h1>
<form action="" onSubmit={handleSubmit}>
<div className="formGroup">
<label htmlFor="name">Name: </label>
<input
type="text"
name="name"
id="name"
value={name}
onChange={handleChange}
required
/>
</div>
<div className="formGroup">
<label htmlFor="email">Email: </label>
<input
type="email"
name="email"
id="email"
value={email}
onChange={handleChange}
required
/>
</div>
<div className="formGroup">
<label htmlFor="password">Password: </label>
<input
type="password"
name="password"
id="password"
value={password}
onChange={handleChange}
required
/>
</div>
<div className="formGroup">
<button className="count_btn" type="Submit">
Register
</button>
</div>
</form>
</div>
);
}
export default Form;
- Through Input
const [state, setState] = useState({ fName: "", lName: "" });
const handleChange = e => {
const { name, value } = e.target;
setState(prevState => ({
...prevState,
[name]: value
}));
};
<input
value={state.fName}
type="text"
onChange={handleChange}
name="fName"
/>
<input
value={state.lName}
type="text"
onChange={handleChange}
name="lName"
/>
***************************
- Through onSubmit or button click
setState(prevState => ({
...prevState,
fName: 'your updated value here'
}));
import { useState } from 'react';
import './App.css';
function App() {
const [details, setDetails] = useState({ email: "", password: "" })
const onChange = (e) => {
const { name, value } = e.target;
setDetails({ ...details, [name]: value })
}
const submitHandler = (e) => {
e.preventDefault();
alert(JSON.stringify(details))
}
return (
<div className="App">
<form onSubmit={submitHandler}>
email : <input type="text" name="email" onChange={onChange} value={details.email} />
//or <input type="text" name="email" onChange={(e) => setDetails({ ...details, email: e.target.value })} value={details.email} /><br /><br />
password :<input type="text" name="password" onChange={onChange} value={details.password} />
<button type="submit">Submit</button>
</form>
<h2>{details.email}</h2>
<h2>{details.password}</h2>
</div>
);
}
export default App;