App.jsx
import './App.css';
import FormData from './form'
function App() {
return (
<div className="App">
<FormData />
</div>
);
}
export default App;
form.jsx
import { useState } from "react"
const FormData = () => {
const [data, setData] = useState({
fname: "",
pass: "",
email: ""
})
const inputEvent = (e) => {
const value = e.target.value
const nameattr = e.target.name
setData((prevData) => {
if (nameattr === 'fname') {
return {
fname: value,
pass: prevData.pass,
email: prevData.email
}
}
else if (nameattr === 'pass') {
return {
fname: prevData.fname,
pass: value,
email: prevData.email
}
}
else {
return {
fname: prevData.fname,
pass: prevData.pass,
email: value
}
}
})
}
const formSubmit = (e) => {
e.preventDefault()
}
return (
<>
<form onSubmit={formSubmit}>
<label>Enter name</label>
<input type="text" id="name" value={data.fname} name="fname"
onChange={inputEvent} />
<br />
<label>Enter pass</label>
<input type="pass" id="pass" value={data.pass} name="pass" onChange={inputEvent} />
<br />
<label>Enter email</label>
<input type="email" id="email" value={data.email} name="email" onChange={inputEvent} />
<br />
<button type="submit">Submit</button>
</form>
<table>
<tr>
<th>name</th>
<th>pass</th>
<th>email</th>
</tr>
<tr>
<td>{data.fname}</td>
<td>{data.pass}</td>
<td>{data.email}</td>
</tr>
</table>
</>
)
}
export default FormData
0 Comments