• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

147
Views
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

about 3 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error