0
140
ViewsHow can I add empty new fields by clicking on a button?
How can I do to display a new row with empty fields Name, Type, Email for Inviteds section if I click on the +Add new invite ?
For now I have only the button...
export default function App() {
...
let handleSubmit = async (e) => {
e.preventDefault();
try {
let res = await fetch("", {
method: "POST",
body: JSON.stringify({
location: location,
...
})
});
let resJson = await res.json();
if (res.status === 200) {
setLocation("");
...
} else {
setMessage("Some error occured");
}
} catch (err) {
console.log(err);
}
};
return (
<div className="flex flex-col">
...
<div className="mt-10 mb-3 h-6 text-md uppercase font-bold leading-8 text-gray-500">
People
</div>
<button>+Add new invite</button>
<form onSubmit={handleSubmit}>
<span >
Names:
</span>
<input
type="text"
value={invitedName}
placeholder="Names"
onChange={(e) => setInvitedName(e.target.value)}
/>
</form>
</div>
);
}
Here the picture to get the idea : 
·
Juan Pablo Isaza
1 answers
Answer question0
The invited values should be an array of invitee objects, each with the name, age, email, and location properties. When adding a new participant add a new invitee object. Map the invited array to an array of the field inputs.
Use generated GUIDs to identify which invitee you are editing.
Example:
import { v4 as uuidV4 } from "uuid";
...
const [invited, setInvited] = useState([
{
id: uuidV4(),
age: "",
email: "",
location: "",
name: ""
}
]);
const updateInvitee = (id) => (e) => {
const { name, value } = e.target;
setInvited((invitees) =>
invitees.map((invited) =>
invited.id === id
? {
...invited,
[name]: value
}
: invited
)
);
};
const addInvitee = () => {
setInvited((invitees) =>
invitees.concat({
id: uuidV4(),
age: "",
email: "",
location: "",
name: ""
})
);
};
...
<div className="mt-10 mb-3 h-6 text-md uppercase font-bold leading-8 text-gray-500">
People
</div>
<button type="button" onClick={addInvitee}>
+Add new participant
</button>
<form onSubmit={handleSubmit}>
{invited.map(({ age, email, id, location, name }) => (
<div key={id}>
<label className="mr-3 h-6 text-md font-bold leading-8 text-gray-500">
Names:
<input
type="text"
value={name}
placeholder="Names"
name="name"
onChange={updateInvitee(id)}
/>
</label>
<label className="mr-3 h-6 text-md font-bold leading-8 text-gray-500">
Age:
<input
type="text"
value={age}
placeholder="Age"
name="age"
onChange={updateInvitee(id)}
/>
</label>
<label className="mr-3 h-6 text-md font-bold leading-8 text-gray-500">
Location:
<input
type="text"
value={location}
placeholder="Location"
name="location"
onChange={updateInvitee(id)}
/>
</label>
<label className="mr-3 h-6 text-md font-bold leading-8 text-gray-500">
Email:
<input
type="text"
value={email}
placeholder="Email"
name="email"
onChange={updateInvitee(id)}
/>
</label>
</div>
))}
</form>
·
Juan Pablo Isaza
Report
Answer question