How to render an array of objects with only one parameter using map?

Question

JavaScript

I have an array with data that looks something like this:

const products = [
    {
        id: 1,
        title: "Some title",
        category: "Category One"
    },
     {
        id: 2,
        title: "Some title",
        category: "Category One"
    },
    {
        id: 3,
        title: "Some title",
        category: "Category Two"
    },
     {
        id: 4,
        title: "Some title",
        category: "Category Two"
    }];

In one array there are products of different categories, but I need to pull out and display products of only one category. Now it all looks like this to me, but this option is incorrect, because it displays the entire array on the screen.

const itemList = products.map(item => <ProductCard
        key = {item.id}
        title = {item.title}
        category = {item.category}
        />)

How to render part of an array with only Category One using map, ignoring Category Two?

Answer 1

Use filter . Or you can place a conditional construct (with the && operator)

const itemList = products.map(item => item.category === "Category Two" && <ProductCard
        key = {item.id}
        title = {item.title}
        category = {item.category}
        />)