title: Firestore Update single item in an array field
body: <p>I have a document in Firebase Firestore that is something like the below.  The main point here is that I have an array called <code>items</code> with objects inside it:</p>
  
  <pre><code>{
   name: 'Foo',
   items: [
     {
       name: 'Bar',
       meta: {
          image: 'xyz.png',
          description: 'hello world'
       }
     },
     {
       name: 'Rawr',
       meta: {
          image: 'abc.png',
          description: 'hello tom'
       }
     }
   ]
  }
  </code></pre>
  
  <p>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</p>
  
  <p>Initially I attempted to do this:</p>
  
  <pre><code>  const key = `items.${this.state.index}.meta.description`
    const property = `hello bar`;
  
    this.design.update({
      [key]: property
    })
    .then(() =&gt; {
      console.log("done")
    })
    .catch(function(error) {
      message.error(error.message);
    });
  </code></pre>
  
  <p>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</p>
  
  <p>I am now trying the following which basically rewrites the whole meta object with the new data</p>
  
  <pre><code>  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(() =&gt; {
      this.setState({
      [key]: meta
      })
    })
    .catch(function(error) {
      message.error(error.message);
    });
  </code></pre>
  
  <p>Unfortunately though, this seems to turn my whole items array into an object that looks something like:</p>
  
  <pre><code>{
   name: 'Foo',
   items: {
  
     0: {
       name: 'Bar',
       meta: {
          image: 'xyz.png',
          description: 'hello world'
       }
     },
     1: {
       name: 'Rawr',
       meta: {
          image: 'abc.png',
          description: 'hello tom'
       }
     }
   }
  }
  </code></pre>
  
  <p>Any ideas how I can just update the content I want to?</p>