title: Calculate total call duration In React Component using starttime and endtime props
body: <p>I need to display the total time of call, the <code>timelineData</code> has already been getting from the <code>props</code>, I have tried to calculate the same using <code>EndDate-StartDate</code> but this logic does not seem to be correct.</p>
  <pre><code>import React from 'react'
  import { Timeline, Typography, Col, Row } from 'antd'
  import { connect } from 'react-redux'
  
  const { Text } = Typography
  
  export class DispositionTimeline extends React.Component {
    render() {
      return (
        &lt;Row className=&quot;dispopage&quot;&gt;
          &lt;Col span={24}&gt;
            &lt;Row&gt;
              &lt;Col className=&quot;timeLineItem&quot; span={24}&gt;
                &lt;Row color=&quot;transparent&quot;&gt;
                  &lt;Col span={14}&gt;&lt;/Col&gt;
                  &lt;Col
                    style={{
                      paddingLeft: '8px',
                      fontWeight: '500'
                    }}
                    span={5}
                  &gt;
                    Start Time
                  &lt;/Col&gt;
                  &lt;Col
                    style={{
                      paddingLeft: '8px',
                      fontWeight: '500'
                    }}
                    span={5}
                  &gt;
                    End Time
                  &lt;/Col&gt;
                &lt;/Row&gt;
                &lt;br /&gt;
                &lt;Timeline&gt;
                  {this.props?.timeLineData?.map((value, index) =&gt; {
                    return (
                      &lt;Timeline.Item&gt;
                        &lt;Col
                          className=&quot;timelineLabel&quot;
                          span={14}
                          style={{
                            paddingRight: '16px'
                          }}
                        &gt;
                          {value.name}
                        &lt;/Col&gt;
                        &lt;Col span={5}&gt;
                          {/* {value.startTime} */}
                          {value.name !== 'End Call' &amp;&amp; value.startTime}
                        &lt;/Col&gt;
                        &lt;Col span={5}&gt;
                          {value.name === 'End Call' &amp;&amp; value.startTime}
                          {value.endTime ? `  ${value.endTime}` : ''}
                        &lt;/Col&gt;
                      &lt;/Timeline.Item&gt;
                    )
                  })}
                &lt;/Timeline&gt;
              &lt;/Col&gt;
            &lt;/Row&gt;
  
            &lt;Row&gt;
              {this.props?.secondAgent?.anotherAgent === 'Primary Agent' ? (
                &lt;&gt;
                  &lt;Col className=&quot;timeLineEnd&quot; span={18}&gt;
                    &lt;Text&gt;Total Call Duration&lt;/Text&gt;
                  &lt;/Col&gt;
                  &lt;Col className=&quot;timeLineEnd timeLineEndRight&quot; span={6}&gt;
                    &lt;Text&gt; {[...this.props?.timeLineData].pop()?.startTime}&lt;/Text&gt;
                  &lt;/Col&gt;
                &lt;/&gt;
              ) : (
                ''
              )}
            &lt;/Row&gt;
          &lt;/Col&gt;
        &lt;/Row&gt;
      )
    }
  }
  
  export const mapStateToProps = (state, ownProps) =&gt; {
    return {
      timeLineData: ownProps?.timeLineData ? ownProps.timeLineData : state.timeLineData?.timeLineData,
      totalDuration: state?.timeLineData?.payload,
      secondAgent: state?.secondAgent?.secondAgent
    }
  }
  
  export default connect(mapStateToProps, null)(DispositionTimeline)
  </code></pre>
  <p>The expression <code>{[...this.props?.timeLineData].pop()?.startTime}</code> is only displaying the startTime of Call. but I want to show the total time, I,e difference between end time and start time</p>