Menu
My current index.html and is stuck at 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 is complaining about this.props.data is undefined, looking at the server access log, it's not loading the comments.json file
961
You're missing the code that loads the comments. If you scroll down a bit in the tutorial, you'll see you can add this code to your comments box 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>
);
}
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
