A new ticket comes in with a request to build a newsfeed from data on a database and we need to have it display differently for each user. The challenge: generating multiple components with similar styles to be displayed for the end user. Approach: JavaScript array methods, such as filter(), are used to manipulate the collection of data. We then use a map() function in React to transform the array of data into a list of visually similar components.

Keys

Keys tell React which array item each component corresponds to, so that it can match them up later. This becomes important if your array items can be modified. A well-chosen key helps React infer what exactly has happened, and make the correct updates to the DOM tree. Rather than generating your own keys, typically data is and can be built with identification numbers or IDs that we can use as a key.

Rendering Data

Let’s say we have loaded data from our database of all news items with the following information within the parsed JSON data. First and foremost, we should assign the data to a constant. Our data is an array of news items with their own key value pairs as seen in the example. To map out the data into a list of components, we can simply pass the data through the map() function and return our information within the HTML. In this example it could all be built into one file called app.js or within your application in another file to call upon later.

// Declaring our data as a constant variable
const news = [{
id: '0',
title: 'This is the Title of the Article',
author: 'Amy',
date: '2023-04-22',
image: 'articleImage.jpg',
article: '...FULL ARTICLE CONTENT GOES HERE...'
},{
id: '1',
title: 'This is the Title of the Article',
author: 'Johnathan',
date: '2023-04-10',
image: 'articleImage.jpg',
article: '...FULL ARTICLE CONTENT GOES HERE...'
},{
id: '2',
title: 'This is the Title of the Article',
author: 'Amy',
date: '2023-04-07',
image: 'articleImage.jpg',
article: '...FULL ARTICLE CONTENT GOES HERE...'
},{
id: '3',
title: 'This is the Title of the Article',
author: 'Amy',
date: '2023-03-21',
image: 'articleImage.jpg',
article: '...FULL ARTICLE CONTENT GOES HERE...'
},{
id: '4',
title: 'This is the Title of the Article',
author: 'Luke',
date: '2023-03-09',
image: 'articleImage.jpg',
article: '...FULL ARTICLE CONTENT GOES HERE...'
},{
id: '5',
title: 'This is the Title of the Article',
author: 'Diana',
date: '2023-02-17',
image: 'articleImage.jpg',
article: '...FULL ARTICLE CONTENT GOES HERE...'
}]
// Mapping the data into individual components and returning the HTML block
export default function NewsItems() {
const newsList = news.map(item =>
<div key={item.id}>
<h1>{item.title}</h1>
<img src={item.image} alt={item.title} />
<p>Published on {item.date} by {item.author}</p>
{item.article}
</div>
)
return <div>{newsList}</div>
}

Filtering Data

If the displayed data should be limited, we can take our full collection and apply a JavaScript filter() to sort out just what we need to return. If the request is to have only one author show on a specific page, we only load the news pertaining to that author, this is how it would be filtered for output. Similar to mapping, we are filtering out just the data with a matching author value and sending it to a new constant variable to be mapped thereafter.

// Filtering the data to only map a specific author
export default function NewsItems() {
const currentAuthorArticles = news.filter(item =>
item.author === 'Amy'
)
const newsList = currentAuthorArticles.map(item =>
<div key={item.id}>
<h1>{item.title}</h1>
<img src={item.image} alt={item.title} />
<p>Published on {item.date} by {item.author}</p>
{item.article}
</div>
)
return <div>{newsList}</div>
}

This is the overall basics of filtering and mapping a collection of data. Once mapped out and key values assigned, the frontend developer’s job becomes slightly easier and allows the focus to reside on how to manipulate the news items with further dynamic filtering and JavaScript. Happy coding!