daily pastebin goal
50%
SHARE
TWEET

Untitled

a guest Jan 23rd, 2019 106 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import ReactDom from 'react-dom';
  2. import React from 'react';
  3. import {render} from 'react-dom';
  4. import $ from 'jquery';
  5.  
  6. class News extends React.Component {
  7.   render () {
  8.     var news = [];
  9.     this.props.news.forEach(function(el, i){
  10.         news.push(<SingleNews key={i} img={el.img} />);
  11.     });
  12.     return (
  13.       <section className="news-wrapper">
  14.           {news}
  15.       </section>
  16.     );
  17.   }
  18. }
  19.  
  20. class App extends React.Component {
  21.     constructor(props) {
  22.         super(props);
  23.         this.state = {
  24.           data: ''
  25.         }
  26.     }
  27.     mapObject(object, callback) {
  28.       return Object.keys(object).map(function (key) {
  29.         return callback(key, object[key]);
  30.       });
  31.     }
  32.     componentDidMount () {
  33.       const newsfeedURL = 'https://s3-eu-west-1.amazonaws.com/streetlife-coding-challenge/newsfeed.json';
  34.       $.get(newsfeedURL, function(result) {
  35.         this.setState({data: JSON.parse(result)});
  36.         console.log(typeof this.state.data.messages);
  37.       }.bind(this));
  38.     }
  39.     render () {
  40.         return (
  41.             <div>
  42.                 {Object.keys(this.state.data.messages).map(function(key) {
  43.                     return <div>Key: {key}, Value: {this.state.data.messages[key]}</div>;
  44.                 })}
  45.             </div>
  46.         )
  47.     }
  48. }
  49.  
  50.  
  51. ReactDom.render(
  52.   <App />,
  53.   document.getElementById('app')
  54. );
  55.    
  56. {Object.keys(this.state.data.messages).map(function(key) {
  57.                 return <div>Key: {key}, Value: {this.state.data.messages[key]}</div>;
  58.             })}
  59.    
  60. this.state = {
  61.    data: '',
  62.    loading: true
  63. }
  64. componentDidMount () {
  65.     const newsfeedURL = 'https://s3-eu-west-1.amazonaws.com/streetlife-coding-challenge/newsfeed.json';
  66.     $.get(newsfeedURL, function(result) {
  67.         this.setState({
  68.           data: JSON.parse(result),
  69.           loading: false
  70.         });
  71.         console.log(typeof this.state.data.messages);
  72.     }.bind(this));
  73. }
  74. render () {
  75.   let content;
  76.   if (this.state.loading === false && this.state.data.messages) {
  77.     content = {Object.keys(this.state.data.messages).map(function(key) {
  78.       return <div>Key: {key}, Value: {this.state.data.messages[key]}</div>;
  79.     })}
  80.   } else {
  81.     content = ''; // whatever you want it to be while waiting for data
  82.   }
  83.   return (
  84.     <div>
  85.       {content}
  86.     </div>
  87.   )
  88. }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top