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

Today we’ll show you how to fix an error Object doesn’t support property or method ‘forEach’ in IE during the react application development.

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

Checkout more articles on JavaScript

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

Way to Fix an error: Object doesn’t support property or method ‘forEach’ in IE for ReactJS

You can use the polyfill from MDN. Add the following script at the top of all imports and it will work like charm.

We will add the code in `polyfill.js` file and import it in React project.

polyfill.js

if (typeof Array.prototype.forEach != 'function') {
  Array.prototype.forEach = function (callback) {
    for (var i = 0; i < this.length; i++) {
      callback.apply(this, [this[i], i, this]);
    }
  };
}

if (global.window && global.window.NodeList && !global.window.NodeList.prototype.forEach) {
  NodeList.prototype.forEach = Array.prototype.forEach;
}

You have to import the above created `polyfill.js` file at the top of `index.js`/`App.js` file. Check the following code for your reference.

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"));

This is exactly what is needed to fix an error.

Thank you for reading. Like & Share with your friends. Happy Coding..!!

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

Way to Fix an error: Object doesn’t support property or method ‘forEach’ in IE for ReactJS

Categories

Tags