JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<div class="container">
  <div class="row">
   <div class="col-6">
     <pre id="json1"></pre>
   </div>
   <div class="col-6">
     <pre id="json2"></pre>
   </div>
  </div>
</div>

CSS

pre {
  background-color: rgba(0,0,0,0.1);
  color: green;
  padding: 25px
}

JavaScript

var value = [
        {"ID":"3","date":null},
        {"ID":"24","date":"07/28/2017"},
        {"ID":"65","date":"05/14/2018"},
        {"ID":"36","date":"06/11/2017"},
        {"ID":"27","date":null},
        {"ID":"18","date":"02/26/2018"},
        {"ID":"37","date":null},
        {"ID":"39","date":"05/15/2017"},
        {"ID":"10","date":"06/11/2017"},
        {"ID":"4","date":null},
        {"ID":"8","date":null},
        {"ID":"12","date":"05/15/2017"},
        {"ID":"14","date":"07/28/2017"},
        {"ID":"19","date":"06/11/2017"}
        ];

var result = value.sort((a, b) => new Date(b.date) - new Date(a.date));

document.querySelector("#json1").innerHTML = JSON.stringify(result, undefined, 2);
document.querySelector("#json2").innerHTML = JSON.stringify(result.reverse(), undefined, 2);