Added poly-fill for .includes but still getting the error in one area despite being resolved in all other areas

Question

IE 11 triggers an Object doesn't support property or method 'includes' because it isn't supported in IE11:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/includes#Browser_compatibility

You have to add the following polyfill for it to work:

if (!String.prototype.includes) {
  String.prototype.includes = function(search, start) {
    'use strict';
    if (typeof start !== 'number') {
      start = 0;
    }

    if (start + search.length > this.length) {
      return false;
    } else {
      return this.indexOf(search, start) !== -1;
    }
  };
}

I have added it to my index.jsx which has resolved the issue for any occurence of .includes() except for one and I'm not sure why.

I have this bit of JS in a React container:

removeInfectedFiles() {
    let { filesAccepted } = this.state;
    const { infected } = this.props.upload.data;

    this.setState({
        ...this.state,
        filesAccepted: filesAccepted.filter(
            file => !infected.includes(file.key)
        )
    })

    var filesInfected = [];

    _.map(infected, i => {
        filesInfected.unshift(
            <p key={ i }>{ i }</p>
        )
    });

    this.setState({
        filesInfected
    })

}

Works in every other browser except IE 11.

Before a file is written to the server, it is scanned for viruses. If a file has the server responds with a list of files that were infected which should be the `this.props.upload.data... and obviously doesn't write them to the server. This removes the filenames from the list of files that were successfully submitted.

Answer 1

Array.prototype.includes() is not the same as String.prototype.includes(). You need to include a pollyfill for the array method if infected is an array.