CODEWITHSUNDEEP
ajaxreactjs
Aessandro
Aessandro

Reputation: 5761

React componentDidMount not firing for jQuery AJAX call

I have the following code:

import React from 'react';
import {render} from 'react-dom';

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
          data: ''
        };
    }
    componentDidMount () {
      $.get(this.props.source, function(result) {
        this.setState({data: result});
      }.bind(this));
    }
    render () {
        return (
            <div>
                <p>{this.state.data}</p>
            </div>
        )
    }
}

render(<App source='https://s3-eu-west-1.amazonaws.com/streetlife-coding-challenge/newsfeed.json'/>, document.getElementById('app'));

package.json:

{
  "name": "streetlife",
  "version": "1.0.0",
  "description": "technical test for streetlife",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-core": "^6.16.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "webpack": "^1.13.2"
  }
}

I would expect to have the json data rendered in my "p" tag but the screen is empty and neither I get errors.

Upvotes: 0

Views: 904

Answers (1)

Diego Cardoso
Diego Cardoso

Reputation: 983

Well, I paste your code in JSBin to see what is going on, but apparently it worked. Here the code working. Maybe is it something with your environment?

Upvotes: 1

Related Questions