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