title: Array.map logging but not showing on screen
body: <p>I have populated an array in my state object, called <code>plateHistory</code>.</p>
  
  <p>Once the array has been populated, I was hoping my UI would update with the data I expect. However, the code below isn't giving me expected results.</p>
  
  <p>The console.log logs the lines as expected, but it <code>&lt;span&gt;</code> never renders. I am trying to map through the array, which is working, as the <code>console.log</code> is logging - but why is the <code>&lt;span&gt;</code> never rendering? I think I am making a basic error, but can't seem to spot it.</p>
  
  <p>Note that the line <code>this.state.plateHistory.length</code> goes from 'Nope', to the correct length. So that is working and the state object is being updated.</p>
  
  <pre><code>&lt;p&gt;Recently printed plates&lt;/p&gt;
                  &lt;p&gt;{this.state.plateHistory.length &gt; 0 ? this.state.plateHistory[0].id : 'Nope'}&lt;/p&gt;
                      {this.state.plateHistory.map((item, i) =&gt; {
                          &lt;div&gt;
                              &lt;span&gt;{item.id}&lt;/span&gt;
                              &lt;div className="col-lg-6 text-center" style={divStyle}&gt;
                                  &lt;span&gt;{item.id}&lt;/span&gt;
                                  {console.log(item.id)}
                              &lt;/div&gt;
                          &lt;/div&gt;
                          })
                      }
  </code></pre>