Render Dynamic News Items In React Using Array Map

Learn State in Class based Component using React JS

Render Dynamic News Items in React Using Array.map() 🗺️ In the previous tutorial, we built the component structure of our News App with a static list of articles hardcoded in state. But in a real app, the number of news articles is never fixed — it changes every time.

That's where JavaScript's Array.map() method comes in. Instead of writing a <NewsItem /> manually for every article, we let React loop through the array and render them dynamically.

In this tutorial, we will learn:

What is Array.map() and why we use it in React
How to store a list of news articles in state
How to render dynamic NewsItem components using map()
What the key prop is and why it is important
How to pass data from parent News to child NewsItem via props

What is Array.map()?

Array.map() is a built-in JavaScript method that loops over every item in an array and returns a new array. In React, we use it to convert an array of data objects into an array of JSX elements.

const numbers = [1, 2, 3];

const doubled = numbers.map((num) => num * 2);

console.log(doubled); // [2, 4, 6]

In React, the same idea applies — instead of doubling numbers, we turn data objects into JSX components.

---

Step 1: Add More Articles to State

Open News.js and expand the articles array in state with more items. Each article object has four fields: title, description, imageUrl, and newsUrl.

import React, { Component } from "react";
import NewsItem from "./NewsItem";

export class News extends Component {
  state = {
    articles: [
      {
        title: "React 19 Released 🚀",
        description: "React 19 brings exciting new features for developers.",
        imageUrl: "https://via.placeholder.com/600x300?text=React+19",
        newsUrl: "#",
      },
      {
        title: "GitHub Copilot Gets Smarter 🤖",
        description: "GitHub Copilot now supports more languages and editors.",
        imageUrl: "https://via.placeholder.com/600x300?text=GitHub+Copilot",
        newsUrl: "#",
      },
      {
        title: "JavaScript Tops Stack Overflow Survey 🏆",
        description: "JS remains the most popular language for the 12th year in a row.",
        imageUrl: "https://via.placeholder.com/600x300?text=JavaScript",
        newsUrl: "#",
      },
      {
        title: "Node.js v22 is Here ⚡",
        description: "Node.js v22 brings better performance and new built-in modules.",
        imageUrl: "https://via.placeholder.com/600x300?text=Node.js+v22",
        newsUrl: "#",
      },
    ],
  };

  render() {
    return (
      <div className="container my-4">
        <h2 className="text-center mb-4">Top Headlines 📰</h2>
      </div>
    );
  }
}

export default News;

---

Step 2: Use Array.map() to Render NewsItem Components

Now inside the render() method, use this.state.articles.map() to loop over each article and return a <NewsItem /> for it. Notice we pass each field as a prop to the child component.

render() {
  return (
    <div className="container my-4">
      <h2 className="text-center mb-4">Top Headlines 📰</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.imageUrl}
              newsUrl={article.newsUrl}
            />
          </div>
        ))}
      </div>
    </div>
  );
}

---

What is the key Prop?

When rendering a list with map(), React requires every element to have a unique key prop. This helps React identify which item changed, was added, or was removed — making updates faster and more efficient.

// ✅ Correct — unique key on the outermost element
{this.state.articles.map((article, index) => (
  <div className="col-md-4" key={index}>
    <NewsItem ... />
  </div>
))}

// ❌ Wrong — missing key prop (React will show a warning)
{this.state.articles.map((article) => (
  <div className="col-md-4">
    <NewsItem ... />
  </div>
))}

💡 Tip: In a real app, prefer using a unique ID from your API data (like article.id) over index as the key, because indexes can cause issues when the list order changes.

---

Step 3: Final News.js File

Here is the complete updated News.js file.

import React, { Component } from "react";
import NewsItem from "./NewsItem";

export class News extends Component {
  state = {
    articles: [
      {
        title: "React 19 Released 🚀",
        description: "React 19 brings exciting new features for developers.",
        imageUrl: "https://via.placeholder.com/600x300?text=React+19",
        newsUrl: "#",
      },
      {
        title: "GitHub Copilot Gets Smarter 🤖",
        description: "GitHub Copilot now supports more languages and editors.",
        imageUrl: "https://via.placeholder.com/600x300?text=GitHub+Copilot",
        newsUrl: "#",
      },
      {
        title: "JavaScript Tops Stack Overflow Survey 🏆",
        description: "JS remains the most popular language for the 12th year in a row.",
        imageUrl: "https://via.placeholder.com/600x300?text=JavaScript",
        newsUrl: "#",
      },
      {
        title: "Node.js v22 is Here ⚡",
        description: "Node.js v22 brings better performance and new built-in modules.",
        imageUrl: "https://via.placeholder.com/600x300?text=Node.js+v22",
        newsUrl: "#",
      },
    ],
  };

  render() {
    return (
      <div className="container my-4">
        <h2 className="text-center mb-4">Top Headlines 📰</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.imageUrl}
                newsUrl={article.newsUrl}
              />
            </div>
          ))}
        </div>
      </div>
    );
  }
}

export default News;

---

How Data Flows (Parent → Child)

Here is a quick overview of how data travels from News to NewsItem:

Parent (News.js)	Passed as Prop	Child (NewsItem.js)
`article.title`	`title={article.title}`	`{title}`
`article.description`	`description={article.description}`	`{description}`
`article.imageUrl`	`imageUrl={article.imageUrl}`	`src={imageUrl}`
`article.newsUrl`	`newsUrl={article.newsUrl}`	`href={newsUrl}`

---

Features and Learnings:-

Understood what Array.map() is and how it works in JavaScript.

Used map() inside the render() method to generate JSX dynamically.

Learned why the key prop is required when rendering lists in React.

Passed data from the parent News component to the child NewsItem via props.

Replaced hardcoded JSX with a dynamic, scalable list rendering approach.

App is now ready to plug in live API data in the next tutorial.