0
134
Views¿Cómo puedo agregar nuevos campos vacíos haciendo clic en un botón?
¿Cómo puedo hacer para mostrar una nueva fila con los campos vacíos Name , Type , Email para la sección Inviteds si hago clic en +Add new invite ? Por ahora solo tengo el boton...
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> ); } Aquí la imagen para hacerse una idea: 
·
Juan Pablo Isaza
1 answers
Answer question0
Los valores invitados deben ser una matriz de objetos invitados, cada uno con las propiedades de name , age , email y location . Al agregar un nuevo participante, agregue un nuevo objeto de invitado. Asigne la matriz invitada a una matriz de las entradas de campo.
Utilice los GUID generados para identificar qué invitado está editando.
Ejemplo:
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