title: React state object parsing issue
body: <p>There's a flaw in the following logic I can't isolate and understand. I have a React dapp (decentralized app), which has a function that listens to an event on Ethereum blockchain. The function gets the event result and stores it in the component's state:</p>
  
  <pre><code>this.setState(prevState =&gt; ({
    eventData: [
      ...prevState.eventData,
      result[0].args
    ]
  }))
  </code></pre>
  
  <p>If <code>console.log(this.state.eventData)</code>, I see:</p>
  
  <pre><code>[
      [{
              "logIndex": 0,
              "transactionIndex": 0,
              "transactionHash": "0xec912b5811f72b9e821fd62f7c79e45c09c641bb9bf4fff3be9e4997be27cd76",
              "blockHash": "0x84f988d6611ba75e8321e20abf23620d68efb0ff721b85447b8072cd5ff07525",
              "blockNumber": 16,
              "address": "0x985b025b6baa40c6d5c7247f4d608efdfc24b81b",
              "type": "mined",
              "event": "EventOne",
              "args": {
                  "paramOne": "0x6a7a88d1f9f6250e1115d05a0489e584d0a0c7c0",
                  "paramTwo": "90",
                  "paramThree": "2",
                  "paramFour": "479",
                  "paramFive": "110123595505617976",
                  "paramSix": "1",
                  "paramSeven": true
              }
          },
          {
              "logIndex": 0,
              "transactionIndex": 0,
              "transactionHash": "0x776ecfd9a1efe0a0d399a4a3d56f2121d5305e4d3219c13ca4e960bcdcce460c",
              "blockHash": "0x109907689e47d96a61bffc0ec4eac5cf4295361d57c9a25fe53aa68e1412eadc",
              "blockNumber": 18,
              "address": "0x985b025b6baa40c6d5c7247f4d608efdfc24b81b",
              "type": "mined",
              "event": "EventOne",
              "args": {
                  "paramOne": "0x6a7a88d1f9f6250e1115d05a0489e584d0a0c7c0",
                  "paramTwo": "90",
                  "paramThree": "17",
                  "paramFour": "480",
                  "paramFive": "110123595505617976",
                  "paramSix": "2",
                  "paramSeven": true
              }
          }
      ]
  ]
  </code></pre>
  
  <p>Then, I need to iterate over the state object and render the results, for which I have the following function. There's a logic that checks for another state, and if the condition hasn't been met, checks for another. Then, it maps the results of <code>this.state.eventData</code>:</p>
  
  <pre><code>{this.state.eventData
          .filter(
            data =&gt;
              this.state.allRecords|| this.state.account === data.paramOne
          )
          .slice(0, 10)
          .reverse()
          .map(
            (
              {
                paramOne,
                paramTwo,
                paramThree,
                paramFour,
                paramFive,
                paramSix
              },
              i
            ) =&gt; (
              &lt;div className="event-result-table-container" key={i}&gt;
                &lt;div className="result-cell"&gt;{paramOne}&lt;/div&gt;
                &lt;div className="result-cell"&gt;
                  &lt;span&gt;{paramTwo? "Win" : "Lose"}&lt;/span&gt;
                &lt;/div&gt;
                &lt;div className="result-cell"&gt;{paramThree}&lt;/div&gt;
                &lt;div className="result-cell"&gt;{paramFour}&lt;/div&gt;
                &lt;div className="result-cell"&gt;{paramFive/ 10000}&lt;/div&gt;
                &lt;div className="result-cell-last"&gt;{paramSix}&lt;/div&gt;
              &lt;/div&gt;
            )
          )}
  </code></pre>
  
  <p><strong>Expected result:</strong>
  I see the rendered blocks with filled-in data from <code>this.state.eventData</code>.</p>
  
  <p><strong>Observed result:</strong>
  Fields are empty for some reason.</p>
  
  <p>What could be wrong here? </p>