I have just started coding in React, I am used to coding in CoffeeScript. I tried to code along the tutorial presented in the React docs and made something similar for status updates.
However, I am getting TypeError: this.props.data.map is not a function
.
I am kinda lost and am wondering where I am wrong. Can someone please guide me and tell me where I am going wrong?
This is my code:
(function() {
var Status, StatusBox, StatusForm, StatusList, button, div, h4, textarea, _ref;
_ref = React.DOM, div = _ref.div, textarea = _ref.textarea, button = _ref.button, h4 = _ref.h4;
StatusBox = React.createClass({
getInitialState: function() {
return {
data: []
};
},
loadStatusFromServer: function() {
return $.ajax({
url: this.props.url,
success: function(data) {
this.setState ({data : data})
}.bind(this),
error: function(xhr, status, err) {
console.error("status.json", status, err.toString());
}.bind(this)
});
},
componentWillMount: function() {
return setInterval(this.loadStatusFromServer, this.props.pollInterval);
},
render: function() {
return div({
className: "status-box"
}, [
StatusForm({}), StatusList({
data: this.state.data
})
]);
}
});
StatusList = React.createClass({
render: function() {
var statusNodes;
statusNodes = this.props.data.map(function(status) { // This is where is it throwing up an error. I have no idea why though?
return Status({
author: status.author
}, [status.text]);
});
return div({
className: "comment-list"
}, [statusNodes]);
}
});
Status = React.createClass({
render: function() {
return div({
className: "status"
}, [
h4({
className: "author"
}, [this.props.author]), this.props.children
]);
}
});
StatusForm = React.createClass({
handleClick: function() {
var name, value;
name = "Samuel";
value = this.refs.status.getDOMNode().value.trim();
return this.refs.status.getDOMNode().value = '';
},
render: function() {
return div({
className: 'status-form'
}, [
textarea({
placeholder: "What's on your mind?...",
rows: 5,
ref: "status"
}), button({
onClick: this.handleClick
}, ["post"])
]);
}
});
React.renderComponent(StatusBox({
url: '/user/blahXHR',
pollInterval: 5000
}), document.body);
}).call(this);
The "TypeError: map is not a function" occurs when we call the map() method on an object that is not an array. To solve the error, console. log the value you're calling the map() method on and make sure to only call the map method on valid arrays.
map is not a function" error occurs because the map method is not implemented on objects. To iterate over an object, use the Object. keys() method to get an array of the object's keys and call the map() method on the array of keys.
In React, the map method is used to traverse and display a list of similar objects of a component. A map is not a feature of React. Instead, it is the standard JavaScript function that could be called on an array. The map() method creates a new array by calling a provided function on every element in the calling array.
Modify the code to this:
loadStatusFromServer: function() {
return $.ajax({
url: this.props.url,
dataType: 'json',
success: function(data) {
this.setState({data: data})
}.bind(this),
Here dataType: 'json',
is important. See $.ajax()
docs and related questions on SO:
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