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.