Estoy usando create-react-app
Tengo los siguientes campos:
<div className="flex flex-col md:flex-row pb-4 mb-4">
<div className="w-64 font-bold h-6 mx-2 mt-3 text-gray-800">Datos de contacto
<div>
<button type="button" className="mr-3 text-sm bg-blue-500 hover:bg-blue-700 text-white py-1 px-5 rounded focus:outline-none focus:shadow-outline"
>+</button>
</div>
</div>
<div className="border-b border-gray-200">
<div className="flex flex-col md:flex-row">
<div className="w-full mx-2">
<div className="my-2 p-1 bg-white flex border border-gray-200 rounded">
<input
placeholder="Nombre del contacto"
name="nombre"
value={nombre}
onChange={onChange}
className="p-1 px-2 appearance-none outline-none w-full text-gray-800 " /> </div>
</div>
<div className="w-full mx-2">
<div className="my-2 p-1 bg-white flex border border-gray-200 rounded">
<input
placeholder="Email"
name="email"
value={email}
onChange={onChange}
className="p-1 px-2 appearance-none outline-none w-full text-gray-800 " /> </div>
</div>
<div className="w-full mx-2">
<div className="my-2 p-1 bg-white flex border border-gray-200 rounded">
<input
placeholder="Teléfono"
name="telefono"
value={telefono}
onChange={onChange}
className="p-1 px-2 appearance-none outline-none w-full text-gray-800 " /> </div>
</div>
<div className="w-full mx-2">
<div className="my-2 p-1 bg-white flex border border-gray-200 rounded">
<input
placeholder="Área o Sector"
name="area"
value={area}
onChange={onChange}
className="p-1 px-2 appearance-none outline-none w-full text-gray-800 " /> </div>
</div>
<div className="w-full mx-2 flex items-center justify-center">
<button type="button"
className="text-sm bg-red-500 hover:bg-red-700 text-white py-1 px-2 rounded focus:outline-none focus:shadow-outline">Eliminar</button>
</div>
</div>
</div>
</div>
(Vean el signo "más"(+))
Y manejo el estado del componente con onChange para obtener los valores de los campos de esta manera:
// State Inicial
const [datosContacto, setdatosContacto] = useState({
nombre: '',
email: '',
telefono: '',
area: ''
});
const {nombre, email, telefono, area} = datosContacto;
const onChange = (e) => {
setdatosContacto({
...datosContacto,
[e.target.name]: e.target.value
}
)
}
Como puedo crear esos campos nuevamente (e infinitamente) al presionar el boton "+"?
Al presionar el botón "eliminar" debería tener una referencia para eliminar los campos (no solo los valores, si no los campos en sí, "el codigo html").
Y además tengo que tener una referencia al "name" de cada input para manejar el estado con setState pero no tengo idea como hacer eso dinamicamente.
Muchas gracias!