title: React convert timestamp to date time inside ".map" function
body: <p>I am building a table that fetches data from a json API. The API gives measurments on electricity power flow between diffrent countries, example:</p>
  <p><strong>GetFlow.json</strong></p>
  <pre><code>[
    {
      &quot;OutAreaElspotId&quot;: &quot;DE&quot;,
      &quot;InAreaElspotId&quot;: &quot;SE4&quot;,
      &quot;Value&quot;: -615,
      &quot;MeasureDate&quot;: 1646123700000
    },
    {
      &quot;OutAreaElspotId&quot;: &quot;DK1&quot;,
      &quot;InAreaElspotId&quot;: &quot;DE&quot;,
      &quot;Value&quot;: 1211.7925,
      &quot;MeasureDate&quot;: 1646123700000
    },
    {
      &quot;OutAreaElspotId&quot;: &quot;DK1&quot;,
      &quot;InAreaElspotId&quot;: &quot;NL&quot;,
      &quot;Value&quot;: 699.8785,
      &quot;MeasureDate&quot;: 1646123700000
    }
  ]
  </code></pre>
  <p>I have managed to display the data in a HTML table:</p>
  <p><a href="https://i.stack.imgur.com/rwIwi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rwIwi.png" alt="enter image description here" /></a></p>
  <p>My problem is that the Measure Date field is in seconds and not a real date and time. It is impossible for the usewr of the table to know what it means..</p>
  <p>My code is as following:</p>
  <p><strong>PhysicalFlow.js</strong></p>
  <pre><code>import React from 'react';
  import axios from 'axios';
  
  export default class PhysicalFlow extends React.Component {
    state = {
      flows: []
    }
  
    componentDidMount() {
  
      let config = {
        headers: {
          Accept: 'application/json', 
          'Access-Control-Allow-Origin': '*',
        }
      }
      
      let data = {
        'HTTP_CONTENT_LANGUAGE': 'no',
      }
  
      axios.get('http://localhost:8010/proxy/restapi/PhysicalFlowMap/GetFlow', data, config)
        .then(res =&gt; {
          const flows = res.data;
          this.setState({ flows });
        })
    };
  
    render() {
      return (
        &lt;table className=&quot;hor-zebra&quot;&gt;
         &lt;thead&gt;
          &lt;tr&gt;
            &lt;th&gt;
              &lt;span&gt;Area&lt;/span&gt;
            &lt;/th&gt;
            &lt;th&gt;
              &lt;span&gt;To&lt;/span&gt;
            &lt;/th&gt;
            &lt;th&gt;
              &lt;span&gt;Measure Date&lt;/span&gt;
            &lt;/th&gt;
            &lt;th&gt;
              &lt;span&gt;Value&lt;/span&gt;
            &lt;/th&gt;
          &lt;/tr&gt;
          &lt;/thead&gt;
         &lt;tbody&gt;
          {
            this.state.flows
              .map(flow =&gt;
         
                &lt;tr key={flow.InAreaElspotId}&gt;
                 &lt;td&gt;&lt;span&gt;{flow.InAreaElspotId}&lt;/span&gt;&lt;/td&gt;
                 &lt;td&gt;&lt;span&gt;{flow.OutAreaElspotId}&lt;/span&gt;&lt;/td&gt;
                 &lt;td&gt;&lt;span&gt;{flow.MeasureDate}&lt;/span&gt;&lt;/td&gt;
                 &lt;td&gt;&lt;span&gt;{flow.Value}&lt;/span&gt;&lt;/td&gt;
               &lt;/tr&gt;
              )
          }
          &lt;/tbody&gt;
        &lt;/table&gt;
      )
    };
  };
  </code></pre>
  <p>Now I have found the following code for converting data:</p>
  <pre><code>var t = new Date();
  t.setSeconds( 1370001284 );
  var formatted = moment(t).format(&quot;dd.mm.yyyy hh:MM:ss&quot;);
  </code></pre>
  <p>But I am unsure where I can place that code. I tried to put it into the .map function like this but it failed:</p>
  <pre><code>{
    this.state.flows
      .map(flow =&gt;
  
        var t = new Date();
        t.setSeconds( flow.MeasureDate );
        var measureDateSaying = moment(t).format(&quot;dd.mm.yyyy hh:MM:ss&quot;);
  
        &lt;tr key={flow.InAreaElspotId}&gt;
         &lt;td&gt;&lt;span&gt;{flow.InAreaElspotId}&lt;/span&gt;&lt;/td&gt;
         &lt;td&gt;&lt;span&gt;{flow.OutAreaElspotId}&lt;/span&gt;&lt;/td&gt;
         &lt;td&gt;&lt;span&gt;{measureDateSaying}&lt;/span&gt;&lt;/td&gt;
         &lt;td&gt;&lt;span&gt;{flow.Value}&lt;/span&gt;&lt;/td&gt;
       &lt;/tr&gt;
      )
  }
  </code></pre>