Object doesn't support property or method ‘find’ in IE

In this article we will show you how to fix the error Object doesn't support property or method ‘find’ in IE during the react application development.

Object doesn't support property or method ‘find’ in IE react, find() not working in all browsers, IE 11 issue - .find() is not supported, IE11: Object doesn't support property or method 'find', Alternative of .find() in Internet Explorer, Crash in IE11 for javascript usage of "find".

Checkout more articles on JavaScript:

• Object doesn’t support property or method ‘includes’ in IE
• Replace all occurrences of a string in JavaScript

If you look at the documentation of find(), most of the browsers don't support this property same as includes().

Way to Fixed the error: Object doesn't support property or method ‘find’ in IE

1. Use filter method instead of find
2. Use the polyfill

1. Use filter method instead of find

You can use widely supported filter() method instead of find(). Look at the below example where we used filter method instead of find method.

data.filter(function (x) {
         return x.id === e
    })[0];

2. Use the polyfill

You can also use the polyfill from MDN. Add below script on top of the all imports and it will work.

if (!Array.prototype.find) {
  Object.defineProperty(Array.prototype, 'find', {
    value: function (predicate) {
      // 1. Let O be ? ToObject(this value).
      if (this == null) {
        throw new TypeError('"this" is null or not defined');
      }

      var o = Object(this);

      // 2. Let len be ? ToLength(? Get(O, "length")).
      var len = o.length >>> 0;

      // 3. If IsCallable(predicate) is false, throw a TypeError exception.
      if (typeof predicate !== 'function') {
        throw new TypeError('predicate must be a function');
      }

      // 4. If thisArg was supplied, let T be thisArg; else let T be undefined.
      var thisArg = arguments[1];

      // 5. Let k be 0.
      var k = 0;

      // 6. Repeat, while k < len
      while (k < len) {
        // a. Let Pk be ! ToString(k).
        // b. Let kValue be ? Get(O, Pk).
        // c. Let testResult be ToBoolean(? Call(predicate, T, « kValue, k, O »)).
        // d. If testResult is true, return kValue.
        var kValue = o[k];
        if (predicate.call(thisArg, kValue, k, o)) {
          return kValue;
        }
        // e. Increase k by 1.
        k++;
      }

      // 7. Return undefined.
      return undefined;
    }
  });
}

Output:

I have created a new file as "polyfill.js" and added above script to load React Application in IE. Your index.js page should look like below.

index.js

// add all script inside the polyfill file
import './polyfill.js';

import React, { Component } from "react";
import { render } from "react-dom";
import "./style.css";

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: "React"
    };
  }

  componentDidMount() {
    const user = "This is test react application.";
    this.setState({
      name: user.includes("react") ? "React Application" : " Application"
    });
  }

  render() {
    return (
      <div>
        <b>Hello {this.state.name}</b>
        <p>Start editing to see some magic happen :)</p>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));