ADD : author & publishedat details

src/components/News.js

@@ -81,7 +81,8 @@ export class News extends Component {
             {!this.state.loading && this.state.articles.map((element) => {
                 return <div className='col md-4' key={element.url}>
                    <NewsItem title={element.title.slice(0,45)} description={element.description}
-                    imageUrl={element.urlToImage} newsUrl={element.url}/>
+                    imageUrl={element.urlToImage} newsUrl={element.url} author={element.author} 
+                    date={element.publishedAt.slice(0,10)}/>
                 </div> 
             })}
       </div>

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 {
           <h5 className="card-title">{title}</h5>
           <p className="card-text">{description}</p>
           <a href={newsUrl} rel="noreferrer"  target='_blank' className="btn btn-sm btn-primary">Read More</a>
+          <p className="card-text mt-2"><small class="text-muted">By {author? author : 'Unknown'} on {date}</small></p>
         </div>
       </div>
       </div>