74 lines
1.5 KiB
JavaScript
74 lines
1.5 KiB
JavaScript
import React, { useState } from 'react';
|
|
|
|
function MyForm() {
|
|
const [formData, setFormData] = useState({
|
|
name: '',
|
|
test2: { name: '', description: '' }
|
|
});
|
|
|
|
const handleChange = (e) => {
|
|
const { name, value } = e.target;
|
|
setFormData({
|
|
...formData,
|
|
[name]: value
|
|
});
|
|
};
|
|
|
|
const handleTest2Change = (e) => {
|
|
const { name, value } = e.target;
|
|
setFormData({
|
|
...formData,
|
|
test2: {
|
|
...formData.test2,
|
|
[name]: value
|
|
}
|
|
});
|
|
};
|
|
|
|
const handleSubmit = (e) => {
|
|
e.preventDefault();
|
|
console.log(formData);
|
|
// we can send this data to our server
|
|
};
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit}>
|
|
<div>
|
|
<label htmlFor="name">Name:</label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
value={formData.name}
|
|
onChange={handleChange}
|
|
/>
|
|
</div>
|
|
<hr />
|
|
<h2>Test 2</h2>
|
|
<div>
|
|
<label htmlFor="test2Name">Name:</label>
|
|
<input
|
|
type="text"
|
|
id="test2Name"
|
|
name="name"
|
|
value={formData.test2.name}
|
|
onChange={handleTest2Change}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="test2Description">Description:</label>
|
|
<input
|
|
type="text"
|
|
id="test2Description"
|
|
name="description"
|
|
value={formData.test2.description}
|
|
onChange={handleTest2Change}
|
|
/>
|
|
</div>
|
|
<button type="submit">Submit</button>
|
|
</form>
|
|
);
|
|
}
|
|
|
|
export default MyForm;
|