Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import ReactDom from 'react-dom';
- import React from 'react';
- import {render} from 'react-dom';
- import $ from 'jquery';
- class News extends React.Component {
- render () {
- var news = [];
- this.props.news.forEach(function(el, i){
- news.push(<SingleNews key={i} img={el.img} />);
- });
- return (
- <section className="news-wrapper">
- {news}
- </section>
- );
- }
- }
- class App extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- data: ''
- }
- }
- mapObject(object, callback) {
- return Object.keys(object).map(function (key) {
- return callback(key, object[key]);
- });
- }
- componentDidMount () {
- const newsfeedURL = 'https://s3-eu-west-1.amazonaws.com/streetlife-coding-challenge/newsfeed.json';
- $.get(newsfeedURL, function(result) {
- this.setState({data: JSON.parse(result)});
- console.log(typeof this.state.data.messages);
- }.bind(this));
- }
- render () {
- return (
- <div>
- {Object.keys(this.state.data.messages).map(function(key) {
- return <div>Key: {key}, Value: {this.state.data.messages[key]}</div>;
- })}
- </div>
- )
- }
- }
- ReactDom.render(
- <App />,
- document.getElementById('app')
- );
- {Object.keys(this.state.data.messages).map(function(key) {
- return <div>Key: {key}, Value: {this.state.data.messages[key]}</div>;
- })}
- this.state = {
- data: '',
- loading: true
- }
- componentDidMount () {
- const newsfeedURL = 'https://s3-eu-west-1.amazonaws.com/streetlife-coding-challenge/newsfeed.json';
- $.get(newsfeedURL, function(result) {
- this.setState({
- data: JSON.parse(result),
- loading: false
- });
- console.log(typeof this.state.data.messages);
- }.bind(this));
- }
- render () {
- let content;
- if (this.state.loading === false && this.state.data.messages) {
- content = {Object.keys(this.state.data.messages).map(function(key) {
- return <div>Key: {key}, Value: {this.state.data.messages[key]}</div>;
- })}
- } else {
- content = ''; // whatever you want it to be while waiting for data
- }
- return (
- <div>
- {content}
- </div>
- )
- }
Add Comment
Please, Sign In to add comment