React code throwing “TypeError: this.props.data.map is not a function”

javascript, reactjs

Solution

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:

- $.ajax - dataType

- Differences between contentType and dataType in jQuery ajax function

Problem

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

Original source

Related problems