Adding Author, Time & Source in Our News App using React JS ✍️🕒📡
A good news card doesn't just show a title and description — it also tells the reader
who wrote it, when it was published, and which source it came from.
This builds trust and gives users context before they click through to read the full story.
In this React JS tutorial, we'll enhance our NewsItem component to display the
author, a nicely formatted publish time, and the news source — all common
requirements when working with real-world News APIs like NewsAPI.org.
In this tutorial, we will learn:
Why showing author, time and source improves credibility and SEO
Passing author, publishedAt and source as props
Formatting dates into human-readable time using JavaScript's Date object
Handling missing or null author names gracefully
Displaying the source as a styled badge
Updating News.js to pass the new fields down to NewsItem
---
Why Author, Time & Source Matter
When users scan a list of news articles, three small details help them decide what to trust
and what to read next: who wrote it, how recent it is, and where it's from.
Showing this metadata isn't just good UX — it also makes your News App feel closer to a real
production-grade product, and it's exactly the kind of data most News APIs (like
author, publishedAt, and source.name) already return for you.
---
Step 1: Update NewsItem to Accept New Props
Open NewsItem.js and destructure three new props: author, publishedAt,
and source.
import React, { Component } from "react";
export class NewsItem extends Component {
render() {
const { title, description, imageUrl, newsUrl, author, publishedAt, source } = this.props;
return (
<div className="my-3">
<div className="card">
<img src={imageUrl} className="card-img-top" alt="news" />
<div className="card-body">
<h5 className="card-title">{title}</h5>
<p className="card-text">{description}</p>
</div>
</div>
</div>
);
}
}
export default NewsItem;
---
Step 2: Handle a Missing Author
Many News APIs return null for the author field. Let's write a small helper method
getAuthor that falls back to "Unknown Author" whenever no author is available.
getAuthor = () => {
return this.props.author ? this.props.author : "Unknown Author";
};
---
Step 3: Format the Published Time
News APIs usually return publishedAt as an ISO date string (e.g. "2025-06-01T10:15:00Z").
Let's write a formatTime method that converts it into a readable, locale-friendly format
using JavaScript's built-in Date object.
formatTime = (dateString) => {
if (!dateString) return "Unknown time";
const date = new Date(dateString);
return date.toLocaleString("en-US", {
day: "numeric",
month: "short",
year: "numeric",
hour: "2-digit",
minute: "2-digit",
});
};
---
Step 4: Display Source as a Styled Badge
The source field tells readers where the article was published (e.g. BBC News, TechCrunch).
We'll wrap it in a Bootstrap badge so it stands out visually on the card.
<span className="badge bg-warning text-dark position-absolute top-0 end-0 m-2">
{source}
</span>
---
Step 5: Combine Everything in render()
Now let's bring the author, formatted time, and source badge together inside the card.
render() {
const { title, description, imageUrl, newsUrl, publishedAt, source } = this.props;
return (
<div className="my-3">
<div className="card position-relative">
<span className="badge bg-warning text-dark position-absolute top-0 end-0 m-2">
{source}
</span>
<img
src={imageUrl || "https://via.placeholder.com/500x250?text=No+Image"}
className="card-img-top"
alt={title}
/>
<div className="card-body">
<h5 className="card-title">{title}</h5>
<p className="card-text">{description}</p>
<p className="card-text">
<small className="text-muted">
By <b>{this.getAuthor()}</b> on {this.formatTime(publishedAt)}
</small>
</p>
<a href={newsUrl} target="_blank" rel="noreferrer" className="btn btn-sm btn-warning">
Read More
</a>
</div>
</div>
</div>
);
}
---
Step 6: Full Updated NewsItem.js
Here is the complete NewsItem.js file with author, time, and source wired together.
import React, { Component } from "react";
export class NewsItem extends Component {
getAuthor = () => {
return this.props.author ? this.props.author : "Unknown Author";
};
formatTime = (dateString) => {
if (!dateString) return "Unknown time";
const date = new Date(dateString);
return date.toLocaleString("en-US", {
day: "numeric",
month: "short",
year: "numeric",
hour: "2-digit",
minute: "2-digit",
});
};
render() {
const { title, description, imageUrl, newsUrl, publishedAt, source } = this.props;
return (
<div className="my-3">
<div className="card position-relative">
<span className="badge bg-warning text-dark position-absolute top-0 end-0 m-2">
{source}
</span>
<img
src={imageUrl || "https://via.placeholder.com/500x250?text=No+Image"}
className="card-img-top"
alt={title}
/>
<div className="card-body">
<h5 className="card-title">{title}</h5>
<p className="card-text">{description}</p>
<p className="card-text">
<small className="text-muted">
By <b>{this.getAuthor()}</b> on {this.formatTime(publishedAt)}
</small>
</p>
<a href={newsUrl} target="_blank" rel="noreferrer" className="btn btn-sm btn-warning">
Read More
</a>
</div>
</div>
</div>
);
}
}
export default NewsItem;
---
Step 7: Pass the New Fields from News.js
Finally, update the <NewsItem /> mapping inside News.js so author,
publishedAt, and source flow down as props.
{articles.map((article, index) => (
<NewsItem
key={index}
title={article.title}
description={article.description}
imageUrl={article.urlToImage}
newsUrl={article.url}
author={article.author}
publishedAt={article.publishedAt}
source={article.source && article.source.name}
/>
))}
---
How the New Props Work
| Prop |
Purpose |
Fallback When Missing |
author |
Displays who wrote the article |
"Unknown Author" |
publishedAt |
Shows a human-readable publish date and time |
"Unknown time" |
source |
Shows the publication name as a badge on the card |
Badge renders empty if not provided |
---
Features and Learnings:-
Understood why author, time and source metadata improve trust and SEO for a News App.
Passed author, publishedAt and source as new props to NewsItem.
Wrote a getAuthor helper to gracefully handle missing author names.
Used JavaScript's Date object to format publishedAt into a readable string.
Displayed the news source as a styled Bootstrap badge on each card.
Updated News.js to pass the new fields down from the articles array.
Prepared the app for the next step: fetching real author, time and source data from a live News API.