title: Update an element in an array in React (using filter /map)
body: <p>I have an array which is of this structure:</p>
  
  <pre><code>this.state.mainArray= [{
      "Upperelement1": "12345",
      "Upperelement2" : [
          {
            Key1:'ok1',Key2:'ok2',Key3:'ok3'
          },
          {
            Key1:'ok4',Key2:'ok6',Key3:'ok7'
          },
          ]
      },
      {
      "Upperelement1": "6789",
      "Upperelement2" : [
          {
            Key1:'ok8',Key2:'ok9',Key3:'o10'
          },
          {
            Key1:'ok11',Key2:'ok12',Key3:'ok13'
          },
          ]
       }
      ]
  </code></pre>
  
  <p>Idea is to iterate through the array and find element where <code>Upperelement1 = 12345</code> and <code>Key1:'ok1'</code> (value of key is unique)
  and add another key to <code>Upperelement2</code>, <code>key4</code>. After updation, array will look like:</p>
  
  <pre><code>  [{
      "Upperelement1": "12345",
      "Upperelement2" : [
          {
  
          Key1:'ok1',Key2:'ok2',Key3:'ok3',Key4:'somevalue'
          },
          {
            Key1:'ok4',Key2:'ok6',Key3:'ok7'
          },
          ]
      },
      {
      "Upperelement1": "6789",
      "Upperelement2" : [
          {
            Key1:'ok8',Key2:'ok9',Key3:'o10'
          },
          {
            Key1:'ok11',Key2:'ok12',Key3:'ok13'
          },
          ]
       }
      ]
  </code></pre>
  
  <p>I tried something like way:</p>
  
  <pre><code>mainArray.map(items =&gt; if (items. Upperelement1 == '12345')
  </code></pre>
  
  <ul>
  <li>but that does not work, 
  Any thoughts how this can be achieved ?
  Can we use filter ?</li>
  </ul>