title: How to iterate over an array of object and show only the latest value in a child component?
body: <p>I am trying to build a Card component that takes in data called <code>tag1,tag2,tag3</code>. This data is from my database and a sample of it is shown below.</p>
  <p>I am trying to iterate over the values labelled temperature and show the latest value from the API under <code>Temperature</code>.</p>
  <p>But currently it outputs every single one of the temperature readings all together.</p>
  <p>So how would I just show a single value which is the latest one?</p>
  <pre><code>const Cards = ({ tag1, tag2, tag3 }) =&gt; {
      console.log(tag1);
      return (
          &lt;div className={styles.container}&gt;
              &lt;Grid container spacing={3} justify=&quot;center&quot;&gt;
                  &lt;Grid item component={Card}&gt;
                      &lt;CardContent&gt;
                          &lt;Typography color=&quot;textPrimary&quot; gutterBottom&gt;
                              Tag 1
                          &lt;/Typography&gt;
                          &lt;Typography variant=&quot;body2&quot;&gt;
                              Temperature:
                              {tag1.map(tag =&gt; tag.temperature)}
                          &lt;/Typography&gt;
                          &lt;Typography variant=&quot;body2&quot;&gt;&lt;/Typography&gt;
                          &lt;Typography variant=&quot;body2&quot;&gt;&lt;/Typography&gt;
                      &lt;/CardContent&gt;
                  &lt;/Grid&gt;
              &lt;/Grid&gt;
          &lt;/div&gt;
      );
  };
  </code></pre>
  <p><strong>tag1: array of objects from API</strong>:</p>
  <pre><code>tag1:
  (261) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]
  
  tag1[0]:
  0:
  accuracy: &quot;15.455&quot;
  eventId: &quot;a7e81ca3-b840-4bb1-b41f-821722da4a5b&quot;
  humidity: &quot;50&quot;
  latitude: &quot;2.708813&quot;
  location: {accuracy: {…}, latitude: {…}, longitude: {…}}
  longitude: &quot;102.0083215&quot;
  name: &quot;Tag1&quot;
  tags: {humidityOffset: {…}, rssi: {…}, dataFormat: {…}, movementCounter: {…}, updateAt: {…}, …}
  temperature: &quot;28.26&quot;
  time: &quot;2020-10-18T01:46:00+0800&quot;
  __proto__: Object
  </code></pre>