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
1 2 3 4 5 6 7 8 9 10 11 | 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | // 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..!!
![[Solved] Uncaught Invariant Violation: Rendered more hooks than during the previous render - Clue Mediator](https://www.cluemediator.com/wp-content/uploads/2022/06/solved-uncaught-invariant-violation-rendered-more-hooks-than-during-the-previous-render-clue-mediator.jpg)
