Uncaught TypeError: this.props.data.map is not a function (using superagent)

Question

I am getting the 'props.data.map is not a function error'. I have also console.log 'this.props.data' in ResultList but somehow it is still not mapping. I have also tried all of the related links in google and stackoverflow.

Please advise. Any help will be greatly appreciated!! Thanks guys :)

The link here shows a screenshot of the response: image

var Results = React.createClass({
  getInitialState: function() {
    return {data: []};
  },

  componentDidMount: function() {
    // loading results from server for initialization
    this.loadResultsFromServer();
  },

  loadResultsFromServer: function() {
    superagent
    .get('http://localhost:5000/analyzer')
    .end(function(err, res){
      if (res) {
        console.log(res);
        this.setState({data: res.text});
      } else {
        console.log("error loading results from server: ", err);
      }
    }.bind(this));
  },

  render: function() {
    return (
      <div>
        <ResultList data={this.state.data} />
      </div>
    );
  }
});

var ResultList = React.createClass({
    render: function() {
      var resultNodes = this.props.data.map(function (result) {
        return (
          <Result name={result.Name}>
            {result.Score}
          </Result>
        );
      });

      return (
        <div>
          {resultNodes}
        </div>
      );
    }
});

Answer 1

It looks like your res.text is a string, not an array. This means it will not have the .map function. If that's the response your API is returning, you'll need to call JSON.parse when setting state, i.e.:

this.setState({ data: JSON.parse(res.text) });