import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
const tweets = [{"name": "John F P", "tweet":"Google cloud for startups are wonderful a asdflj laskdfjl kasdjteet"}, {"name": "Tiffany P", "tweet":"You are going to be a good person"}, {"name": "John P", "tweet":"sdfj a asdflj laskdfjl kasdjteet"}, {"name": "John P", "tweet":"sdfj a asdflj laskdfjl kasdjteet"}, {"name": "John P", "tweet":"sdfj a asdflj laskdfjl kasdjteet"}, {"name": "John P", "tweet":"sdfj a asdflj laskdfjl kasdjteet"}, {"name": "John P", "tweet":"sdfj a asdflj laskdfjl kasdjteet"}, {"name": "John P", "tweet":"sdfj a asdflj laskdfjl kasdjteet"}, {"name": "John P", "tweet":"sdfj a asdflj laskdfjl kasdjteet"}]
class App extends Component {
  renderList(){
    return(
      tweets.map((tweet) => (
        <div className="tweet">
          <h3 className="tweetName">{tweet.name + " tweeted"}</h3>
          <p className="tweetText">{tweet.tweet}</p>
        </div>
        ))
      )
  }
  render() {
    return (
      <ul>
        {this.renderList()}
      </ul>
    );
  }
}

class Button extends Component {
  renderList() {
    return 'fuck you'
  }
}

export default App;