Estoy desarrollando una aplicación MERN Stack, que es una aplicación "linktree" y funciona muy bien, pero tengo un detalle que me cuesta enviar enlaces (en el modelo, es una matriz de objetos) tantas veces como quiera. la figura de abajo lo muestra, con axios . no puedo entender Este es mi método para capturar los datos como se muestra a continuación. Quiero cada vez que hago clic para agregar enlaces para que se agregue un nuevo objeto en los enlaces. ¿Podría alguien dar alguna idea, por favor?

manejar enviar

 const handleSubmit = (e) => { e.preventDefault(); axios.post( '/api/v1/client/create', { completeName, featuringTitle, description, status, links, youtubeLinkFeaturing, avatar, image, bannerLink, plan } ) .then(u => { console.log(u.data.client); if (u.data.success === true) { toast.success("Client foi criado com sucesso"); } }) .catch(error => { console.log(error); toast.error(error.response.data.message); }) }

método handleChange

 const handleChange = (e) => { //console.log("cliked"); if (e.target.name === 'avatar') { const reader = new FileReader(); reader.readAsDataURL(e.target.files[0]) reader.onloadend = () => { setAvatar(reader.result); } } else if (e.target.name === 'image'){ const reader1 = new FileReader(); reader1.readAsDataURL(e.target.files[0]) reader1.onloadend = () => { setImage(reader1.result); } } else if ( e.target.name === 'socialNetworkName' || e.target.name === 'socialLink' || e.target.name === 'icon' ) { setLinks({ ...links, [e.target.name]: e.target.value }) } else { setClient({ ...client, [e.target.name]: e.target.value }) } }

Esquema del cliente

 const clientSchema = new mongoose.Schema( { completeName: { type: String, trim: true, required: [true, 'Please add the user name'], maxlength: 50 }, description: { type: String, trim: true, required: [true, 'Please add the user description'], maxlength: 2000 }, links: [ { socialLink: "", socialNetworkName: "", icon: "" } ], ... }, { timestamps: true } ) module.exports = mongoose.model("Client", clientSchema);