ReactJS doesn't render in IE11

10,461

Solved it. IE11 didn't like this part of newsfeed.js:

for(tag of tagArray){
                tags.push(<a href={"?tag="+tag} className="postTag">{tag}</a>);
            }

It works after replacing it with this:

for(var i in tagArray){
    var tag=tagArray[i];
    tags.push(<a href={"?tag="+tag} className="postTag">{tag}</a>);
}
Share:
10,461
Kokesh
Author by

Kokesh

PHP/MySQL developer

Updated on June 04, 2022

Comments

  • Kokesh
    Kokesh almost 2 years

    My site works flawlessly in web browsers, but IE11 shows this error in console.

    What should I do with this?

    React.render(
        <NewsFeed tagFilter={tagFilter}/>,
        document.getElementById('newsFeed')
    );
    

    'NewsFeed' is undefined

    EDIT: Here is the newsfeed (.js JSX file, included in page's header)

    var Article = React.createClass({
        askDelete: function(id,title) {
            if (confirm("Delete the '"+title+"'?")) {
                $.ajax({
                    url: "/-----removed----/"+id,
                    type: "DELETE",
                    async: false,
                    cache: false,
                    dataType: 'json'
                });
                location.reload();
            }
        },
        handleClick: function(id) {
            React.unmountComponentAtNode(document.getElementById('editor'));
    
            React.render(
                    <PostEditor
                        postId={id}
                    />,
                    document.getElementById('editor')
                );
            functAdmin.showEditor();
        },
        render: function() {
            var editIcon=[];
            var boundClick = this.handleClick.bind(this, this.props.id);
            var boundDeleteClick = this.askDelete.bind(this, this.props.id,this.props.title);
            editIcon.push(<span className="adminActionsNewsfeed" key={"editIcon"+this.props.id}><i className="pointer gray fa fa-edit" onClick={boundClick}></i><i className="pointer fa fa-remove red" onClick={boundDeleteClick} key={"deleteNewsIcon"+this.props.id}></i></span>);
            var tags=[];
            if (typeof this.props.tags != 'undefined') {
                var tagArray=this.props.tags.split(",");
                for(tag of tagArray){
                    tags.push(<a href={"?tag="+tag} className="postTag">{tag}</a>);
                }
            }
            return (
                <div className="article" key={"newsArticle"+this.props.id}>
                    {editIcon}
                    <span className="articleTitle">
                        {this.props.title}
                    </span>
                    <span className="articleTime">
                        {funct.formatDate(this.props.time)}
                    </span>
                    <div className="articleBody">
                        {this.props.children}
                    </div>
                    <div className="tagLine">{tags}</div>
                </div>
            );
        }
    });
    
    var ArticleList = React.createClass({
        render: function() {
            this.props.data.sort(funct.SortByTime);
            var postNodes = this.props.data.map(function (item) {
                var tags = item.news_tags.toLowerCase().split(",");
                if ((tagFilter=="") || (tags.indexOf(tagFilter) > -1)) {
                    return (
                        <Article
                            key={"news"+item.news_id}
                            title={item.news_title}
                            tags={item.news_tags}
                            time={item.news_time}
                            id={item.news_id}
                        >
                        {item.news_body}
                        </Article>
                    );
                }
            });
            return (
                <span>
                    {postNodes}
                </span>
            );
        }
    });
    
    var NewsFeed = React.createClass({
        launchAdd: function() {
            React.unmountComponentAtNode(document.getElementById('editor'));
            React.render(
                    <PostEditor
                        postId={""}
                    />,
                    document.getElementById('editor')
                );
            functAdmin.showEditor();
        },
        getInitialState: function() {
            return {data: []};
        },
        refreshPostStatus: function() {
            $.ajax({
                url: "/-----removed----",
                type: "GET",
                cache: false,
                dataType: 'json',
                success: function(data) {
                    this.setState({data: data});
                }.bind(this),
                error: function(xhr, status, err) {
                    console.log( xhr.responseText);
                    console.error(this.props.url, status, err.toString());
                }.bind(this)
            });
        },
        componentDidMount: function() {
            this.refreshPostStatus();
        },
        render: function() {
            var addIcon=[];
            addIcon.push(<div className="addPostLine"><i className={funct.statusIcon[5]+" fa-2x"} onClick={this.launchAdd} />Add new post</div>);
            return (
                <span>
                    <i className="fa fa-file fa-lg blue"></i>
                    {addIcon}
                    <h1>Netbiter funct System Information</h1>
                    <ArticleList data={this.state.data}/>
                </span>
            );
        }
    });
    
  • Perfection
    Perfection almost 8 years
    why not tags = tagArray.map(function(tag, index) {return <a>});