JSFiddle - React, Tailwind, and code Playground

JavaScript

Array.prototype.firstOrUndefined = function(unpred) {
  for (var i = 0; i < this.length; i++)
    if (unpred(this[i]))
      return this[i];
}

Array.prototype.forInFirstOrUndefined = function(unpred) {
  for (var i in this)
    if (unpred(this[i]))
      return this[i];
};

this.StatusMappings = [{
  Range: [Infinity * -1, 50],
  Color: 'red',
  Text: 'Just getting started - will require considerable time to complete.'
}, {
  Range: [50, 70],
  Color: 'yellow',
  Text: 'Incomplete - major gaps exist and completion will take some time.'
}, {
  Range: [70, 90],
  Color: 'yellgreen',
  Text: 'Partially completed - but some gaps remain which can be completed shortly.'
}, {
  Range: [90, Infinity],
  Color: 'green',
  Text: 'Fully completed - no additional work needed.'
}];

this.UpdateInfo = function($slider, newval) {
  var color = this.StatusMappings.forInFirstOrUndefined(function(map) {
  	console.log(map); //Before the error occurs, this should log the Array.prototype.firstOrUndefined function
    console.log("map.Range = ");
    console.log(map.Range); //TEST
    return map.Range[0] >= newval && map.Range[1] < newval;
  });
  //Try alternating between the two to see the difference how the console.log(map) behaves...
  /*
    var color = this.StatusMappings.firstOrUndefined(function(map) {
      console.log(map);
      console.log("map.Range = ");
      console.log(map.Range); //TEST
      return map.Range[0] >= newval && map.Range[1] < newval;
  	});
  */
  //$slider.closest('.slider').addClass(color);
};

this.UpdateInfo(100);