Creating Cards For News App And Fetching Api Key From News Api

Class Components vs Function Components in React JS

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:

npm start

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.