Creating Cards for NEWS App and Fetching API Key from NEWS API 🗞️
In the last tutorial, we built the component structure of our News App.
Now it's time to make it real — we will style our news cards properly
and connect our app to a live News API to fetch actual articles.
In this tutorial, we will learn:
What is NewsAPI and why we use it
How to create a free account and get an API Key
Improving the NewsItem card design using Bootstrap
Fetching live news using the API Key inside News component
Displaying real news articles in our app
What is NewsAPI?
NewsAPI.org is a free service that gives developers
access to live news headlines from hundreds of sources around the world through a simple REST API.
We will use it to fetch real news articles and display them inside our News App.
---
Step 1: Get Your Free API Key
Follow these steps to get your API key:
Go to https://newsapi.org/register
Fill in your name, email, and password and click Submit
After registering, you will be taken to your dashboard
Copy your API Key — we will use it inside our React app
Your API key will look something like this:
4f3c2b1a9e8d7f6e5c4b3a2d1e0f9c8b
⚠️ Important: Never share your API key publicly or push it to GitHub.
For this tutorial we keep it in the component directly, but in production always use environment
variables.
---
Step 2: Test the API in Your Browser
Before using the API inside React, let's test it in the browser.
Replace YOUR_API_KEY with your actual key and open this URL:
https://newsapi.org/v2/top-headlines?country=in&apiKey=YOUR_API_KEY
You should see a JSON response with a list of articles. Each article has fields like
title, description, url, urlToImage, and
publishedAt.
These are exactly the fields we will use inside our NewsItem card.
---
Step 3: Improve the NewsItem Card
Let's upgrade our NewsItem component to display all the useful fields from the API response,
including the image, title, description, source, published date, and a Read More button.
import React from "react";
function NewsItem({ title, description, imageUrl, newsUrl, author, publishedAt, source }) {
return (
<div className="card my-3 shadow-sm" style={{ borderRadius: "12px", overflow: "hidden" }}>
<div style={{ position: "relative" }}>
<img
src={imageUrl || "https://via.placeholder.com/600x300?text=No+Image"}
className="card-img-top"
style={{ height: "200px", objectFit: "cover" }}
alt={title}
/>
<span
className="badge bg-warning text-dark"
style={{ position: "absolute", top: "10px", right: "10px", fontSize: "12px" }}
>
{source}
</span>
</div>
<div className="card-body">
<h5 className="card-title">{title}</h5>
<p className="card-text" style={{ fontSize: "14px", color: "#555" }}>
{description || "No description available."}
</p>
<p className="card-text">
<small className="text-muted">
By {author || "Unknown"} | {" "}
{new Date(publishedAt).toLocaleDateString("en-IN", {
day: "numeric",
month: "long",
year: "numeric",
})}
</small>
</p>
<a
href={newsUrl}
target="_blank"
rel="noreferrer"
className="btn btn-warning btn-sm"
>
Read More →
</a>
</div>
</div>
);
}
export default NewsItem;
---
Step 4: Fetch Live News in the News Component
Now update the News class component to use componentDidMount to call the
NewsAPI and store the articles in state.
Replace YOUR_API_KEY with your actual key.
import React, { Component } from "react";
import NewsItem from "./NewsItem";
export class News extends Component {
state = {
articles: [],
loading: false,
};
async componentDidMount() {
let apiKey = "YOUR_API_KEY";
let url = `https://newsapi.org/v2/top-headlines?country=in&apiKey=${apiKey}`;
this.setState({ loading: true });
let data = await fetch(url);
let parsedData = await data.json();
this.setState({
articles: parsedData.articles,
loading: false,
});
}
render() {
return (
<div className="container my-4">
<h2 className="text-center mb-4">📰 Top Headlines — India</h2>
<div className="row">
{this.state.articles.map((article, index) => (
<div className="col-md-4" key={index}>
<NewsItem
title={article.title}
description={article.description}
imageUrl={article.urlToImage}
newsUrl={article.url}
author={article.author}
publishedAt={article.publishedAt}
source={article.source.name}
/>
</div>
))}
</div>
</div>
);
}
}
export default News;
---
Step 5: Run the App
Make sure your development server is running:
Open http://localhost:3000 in your browser.
You should now see a grid of real, live news cards fetched directly from the NewsAPI! 🎉
---
How the Data Flows
| API Field |
Prop Passed To NewsItem |
Displayed As |
article.title |
title |
Card heading |
article.description |
description |
Card body text |
article.urlToImage |
imageUrl |
Card top image |
article.url |
newsUrl |
Read More link |
article.author |
author |
Author name below card |
article.publishedAt |
publishedAt |
Formatted publish date |
article.source.name |
source |
Badge on card image |
---
Features and Learnings:-
Learned what NewsAPI is and how to register for a free API Key.
Tested the API endpoint directly in the browser.
Upgraded the NewsItem card with image, source badge, author, and date.
Used componentDidMount to fetch live news on component load.
Stored API response in state and passed articles as props to NewsItem.
Displayed real headlines in a responsive 3-column grid using Bootstrap.
Understood how data flows from the API through the parent News component down to the child NewsItem
component.