title: React : Reverse function is not working in mapping an array
body: <p>I am working on page where I am showing data that are coming from API . Actually I am trying to display array data in reverse order but it not displaying data in reverse. when I refresh a page , first time data is displaying in reverse but after 3 seconds data is revert and display in original form . please help me thanks </p>
  
  <p><strong>Code</strong></p>
  
  <pre><code>import React, { Component } from "react";
  import DayPicker from "react-day-picker";
  import "react-day-picker/lib/style.css";
  import "./style.css";
  import axios from "axios";
  
  class DiarySideBar extends Component {
    constructor(props) {
      super(props);
      this.state = {
        data: []
      };
    }
  
    componentWillMount() {
      axios.get("/api/diary/all").then(res =&gt; {
        this.setState({
          data: res.data.rows
        });
      });
    }
    render() {
      const { data } = this.state;
      return (
        &lt;div&gt;
          &lt;div className="calendarWrapper"&gt;
            &lt;DayPicker /&gt;
          &lt;/div&gt;
          &lt;div className="activeTaskMainWrapper"&gt;
            &lt;h6 className="activeTaskHeaderWrapper"&gt;Active Tasks&lt;/h6&gt;
            {data
              .reverse()
              .slice(0, 5)
              .map(newData =&gt; (
                &lt;div className="activeTaskText"&gt;
                  &lt;b&gt;{newData.taskType}&lt;/b&gt;
                  &lt;p&gt;{newData.subject}&lt;/p&gt;
                  &lt;hr /&gt;
                &lt;/div&gt;
              ))}
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default DiarySideBar;
  </code></pre>