Firestore Update single item in an array field

Question

I have a document in Firebase Firestore that is something like the below. The main point here is that I have an array called items with objects inside it:

{
 name: 'Foo',
 items: [
   {
     name: 'Bar',
     meta: {
        image: 'xyz.png',
        description: 'hello world'
     }
   },
   {
     name: 'Rawr',
     meta: {
        image: 'abc.png',
        description: 'hello tom'
     }
   }
 ]
}

I am trying to update a field inside the item array, under the meta object. For example items[0].meta.description from hello world to hello bar

Initially I attempted to do this:

  const key = `items.${this.state.index}.meta.description`
  const property = `hello bar`;

  this.design.update({
    [key]: property
  })
  .then(() => {
    console.log("done")
  })
  .catch(function(error) {
    message.error(error.message);
  });

This didn't appear to work though, as it removed everything in the item index I wanted to modify, and just kept the description under the meta object

I am now trying the following which basically rewrites the whole meta object with the new data

  const key = `items.${this.state.index}.meta`
  const property = e.target.value;
  let meta = this.state.meta;
  meta[e.target.id] = property;

  this.design.update({
    [key]: meta
  })
  .then(() => {
    this.setState({
    [key]: meta
    })
  })
  .catch(function(error) {
    message.error(error.message);
  });

Unfortunately though, this seems to turn my whole items array into an object that looks something like:

{
 name: 'Foo',
 items: {

   0: {
     name: 'Bar',
     meta: {
        image: 'xyz.png',
        description: 'hello world'
     }
   },
   1: {
     name: 'Rawr',
     meta: {
        image: 'abc.png',
        description: 'hello tom'
     }
   }
 }
}

Any ideas how I can just update the content I want to?

Answer 1

You can make a separate collection for that particular array, like this in this picture earlier I had different fields (no collections) of name, email and pages, And in this, I wanted to change the data of a specific page that is inside the array. For that, I made a different collection of pages with individual documents of each page having values of title description and content which can be mutated.