diff --git a/src/components/News.js b/src/components/News.js index 90f22da..6ccf2c9 100644 --- a/src/components/News.js +++ b/src/components/News.js @@ -81,7 +81,8 @@ export class News extends Component { {!this.state.loading && this.state.articles.map((element) => { return
+ imageUrl={element.urlToImage} newsUrl={element.url} author={element.author} + date={element.publishedAt.slice(0,10)}/>
})} diff --git a/src/components/NewsItem.js b/src/components/NewsItem.js index ff4bcdd..82acf26 100644 --- a/src/components/NewsItem.js +++ b/src/components/NewsItem.js @@ -3,7 +3,7 @@ import React, { Component } from 'react' export class NewsItem extends Component { render() { - let {title, description, imageUrl, newsUrl} = this.props ; + let {title, description, imageUrl, newsUrl, author, date} = this.props ; let defaultImage = 'https://www.google.com/imgres?imgurl=https%3A%2F%2Fimages.ctfassets.net%2Flh3zuq09vnm2%2F1ENjVxhiWtm7LCwLFhgiW9%2F3132b27acddbfab3131686ea80310fdc%2Fconducting-usability-test_yon4BQT.svg&imgrefurl=https%3A%2F%2Fwww.hotjar.com%2Fusability-testing%2Fprocess-examples%2F&tbnid=RfcanOTfNU2P-M&vet=12ahUKEwiM5J27-d_6AhVDi9gFHXu4BqUQMygCegUIARDeAQ..i&docid=ipEmDD0rz65fGM&w=800&h=534&q=test&hl=en&ved=2ahUKEwiM5J27-d_6AhVDi9gFHXu4BqUQMygCegUIARDeAQ' return ( @@ -14,6 +14,7 @@ export class NewsItem extends Component {
{title}

{description}

Read More +

By {author? author : 'Unknown'} on {date}