React Internet explorer 11 showing the result of matching by mistake of Immutable collection

Question

I have a problem displaying Immutable array objects in React in Internet explorer 11.

For example, I have a response from an array service:

array = [{title: 'Hello world'}, {title: 'Night view'}]

I convert this array to immutable in the reducer and save it. Then, TitlesContainerin the rendering method, try iterating over the elements:

render () {
  const { array } = this.props
  return (
    <ul>
      {array.map((item, index) => {
        return <li key={index}>{item.get('title')}</li>
      })}
    </ul>
  )
}

Everything works fine in Chrome, Opera, Firefox. But in Internet Explorer 11, I have this error:

Invariant violation: objects are not valid as a child of the React element (found: List [[object Object], [object Object]]). If you want to display a collection of children, use an array or wrap the object with createFragment (object) from React add-ins. Check the rendering method TitlesContainer.

webpack.config.js babel-polyfill enrty - IE11, "Promise " . , .

array.toJS().map array.map, , .

Answer 1

<li> '()', <ul>:

render () {
  const { array } = this.props
    return (
      <ul>
        {array.map((item, index) => {
          return (<li key={index}>{item.get('title')}</li>)
      })}
      </ul>
    )

}

:

{array.map((item, index) => (<li key={index}>{item.get('title')}</li>)};

<li> . . F.E. make key={'name_of_my_list' + item.get('id)} ( , ;))