ReactJS tutorial stuck at url attribute
My current index.html and stuck with externalise json file:
<html>
<head>
<title>Hello React</title>
<script src="https://fb.me/react-0.13.2.js"></script>
<script src="https://fb.me/JSXTransformer-0.13.2.js"></script>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/jsx">
var Comment = React.createClass({
render: function(){
return (
<div className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
<span dangerouslySetInnerHTML={{__html:marked(this.props.children.toString(), {sanitize:true})}} />
</div>
);
}
});
var CommentList = React.createClass({
render: function(){
return (
<div className="commentList">
{
this.props.data.map(function (comment) {
return(
<Comment author={comment.author}>
{comment.text}
</Comment>
);
})
}
</div>
);
}
});
var CommentForm = React.createClass({
render: function(){
return (
<div className="commentForm">
Hello, world! I am a CommentForm
</div>
);
}
});
var CommentBox = React.createClass({
render: function(){
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.props.data} />
<CommentForm />
</div>
);
}
});
React.render(
<CommentBox url="comments.json" />,
document.getElementById('content')
);
</script>
</body>
</html>
comments.json file
{"data": [
{"author": "Pete Hunt", "text": "This is one comment"},
{"author": "Jordan Walke", "text": "This is *another* comment"}
]
}
Console complains about this.props.data
undefined looking at the server access log without downloading the filecomments.json
+3
source to share
1 answer
You are missing the code that loads the comments. If you scroll a bit through the tutorial, you will see that you can add this code to your comment window component:
var CommentBox = React.createClass({
getInitialState: function() {
return {data: []};
},
componentDidMount: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
cache: false,
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data} />
<CommentForm />
</div>
);
}
});
+2
source to share