How to save multiple string inside an array column in MongoDB

23 Views Asked by At

I am saving data in MongoDB using Express, Mongoose and React.js. I am able to save title and price but i am not able to save multiple string inside images column that is in array format.

see below picture: This is how i want to save multiple URLs inside images column.

enter image description here

I am trying below code but not able to achieve the desired result.

here is the Schema:

const mongoose = require('mongoose');  
const ReactFormDataSchema = new mongoose.Schema({
    title: String,
    price: Number,
    images: Array
   
}, { versionKey: false });

const PostProduct = mongoose.model('mytable', ReactFormDataSchema);
module.exports = PostProduct;

controller:

app.post('/post-product', async(req, res) => {
  PostProduct.create(req.body)
  .then(mytable => res.json(mytable))
  .catch(err => res.json(err))
});

here is the react.js code:

  const [title, setTitle] = useState("")
  const [price, setPrice] = useState("")
  const [images, setimages] = useState([])

  const handleSubmit = (e) => {
    e.preventDefault();
    axios.post('http://localhost:5000/post-product', {
      title, price,
      images
    })

  }

   <form onSubmit={handleSubmit}>

    <div className='col-12 mt-3'>
    <div className="form-group">
        <div>Title</div>
       <input className="form-control" type="text" placeholder="Title..."  name="title"
       onChange={(e) => {setTitle(e.target.value)}} />
    </div>
    </div>


    <div className='col-lg-2 mt-3'>
    <div className="form-group">
        <div>Price</div>
        <input className="form-control" type="text" placeholder="Price"   name="price"
        onChange={(e) => {setPrice(e.target.value)}} />
    </div>
    </div>



<div className='col-12 mt-3'>
    <div className="form-group">
        <div>Images</div>

        <input className="form-control" type="text" placeholder="Image"   name="images1"
        onChange={(e) => {setimages(e.target.value)}} />

        <input className="form-control mt-2" type="text" placeholder="Image2"   name="images2"
        onChange={(e) => {setimages(e.target.value)}} />
    </div>
</div>
</form>
0

There are 0 best solutions below