How can I add empty new fields by clicking on a button?

Question

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 :

Answer 1

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>