ReactJS fetch server data in a proper way

Question

So I try to build some React Component on ES6 standars but my code breaks on server data fetching I keep getting Uncaught TypeError: Cannot read property 'map' of undefined

import React from 'react';

class PropertiesList extends React.Component {

  constructor(props){

    super(props);
    this.state = { data:[]}
  }


  loadPropertiesFromServer() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      success: (data) => {
        console.log(data);
        this.setState({data: data});
      },
      error: (xhr, status, err) => {
        console.error(this.props.url, status, err.toString());
      }
    });
  }

  componentDidMount() {
    this.loadPropertiesFromServer();
    setInterval(this.loadPropertiesFromServer.bind(this), this.props.pollInterval);;
  }

  render() {
    var propertyNodes = this.props.data.map((property) => {

    return (<Property>
                  {property.description}
            </Property>)
     });

    return <div className="row">
        <div className="col-lg-12">
          <h1>Available Properties</h1>
          {propertyNodes}
        </div>
    </div>;
  }
}

export default PropertiesList

Entry Point

import React from 'react';
import PropertiesList from './../components/propertylist.jsx';
import Filters from './../components/filter.jsx';
import Properties from './../models/PropertiesModel.js';
    class TransProperties extends React.Component {

      render() {

        return <div className="row">
            <div className="col-lg-9">
                <PropertiesList url="/properties.json"/>
            </div>
            <div className="col-lg-3">
                <Filters/>
            </div>
        </div>;
      }
    }

    export default TransProperties

How are you using this code? You can't "export default" 2 times in the same module — Amit
– Amit, Commented Jul 19, 2015 at 9:37
I edited your question to show it's 2 different files, but it looks incomplete (isn't the 2nd file missing import react...?). Is there anything missing from the code? — Amit
– Amit, Commented Jul 19, 2015 at 9:41
The data returned by your server doesn't seem to be an array, therefore it does not have a map method. What does the console.log call report? — David Aurelio
– David Aurelio, Commented Jul 19, 2015 at 10:00
Also: you should really clear the interval in componentWillUmnount — David Aurelio
– David Aurelio, Commented Jul 19, 2015 at 10:01

David Aurelio · Accepted Answer · 2015-07-19 10:09:21Z

1

In your render() method, you try to access this.props.data rather than this.state.data

answered Jul 19, 2015 at 10:09

David Aurelio

5042 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

ReactJS fetch server data in a proper way

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related