• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

145
Vistas
axios post object with an array of objects according to the model provided

I'm developing a MERN Stack app, which is a "linktree" App and it's working great, but I have one detail I'm struggling to send links (in the model, it's an array of objects) as many times I want as the figure below show it, with axios. I can't figure out. This is my method to capture the data as shown below. I want each time I click to add links for a new object to be added in the links. Could someone give some insight please.

handle submit

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);
    })
}

handleChange method

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 })
  }   
}

Client Schema

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);

mern stack linktree

almost 3 years ago · Juan Pablo Isaza
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda