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