How to use .filter inside ReactJs Component

Question

I'm Using React for the first time and I am trying to filter a JSON response so that I can display a list of products.

When I log the result of the filter to the console I seem to get the correct data. However when I try and map over it and render it ".Products" seems to be undefined.

import React, { useContext } from 'react';
import { MenuContext } from '../context/menuContext';

function Category() {
    const [categoryItems] = useContext(MenuContext);

    const category = categoryItems.filter(element => element.CategoryName == "Rice");

    console.log(category);

    return (

        <div>
            <h1>Category Page</h1>

            {category.Products.map(productItem => (
                <h3 key={productItem.Id}>{productItem.ProductName}</h3>

            ))}
        </div>
    );
}
export default Category;

Update: Thanks @Ori Drori for your comment. I have tried to use .find and still does not work.

I think this is something to do with how react works. Becuase in the console I am getting an empty output before I get the correct result.

Update 2: I implemented the answer that I have marked as correct and its now working. HOWEVER. There are two things I don't understand and I would like someone to explain.

When I call

console.log(console.log(category);

Why is it that in the console I see 'undefined' before I get the result with the data.

Why do I need to put 'category &&' when I remove it. It stops working.

Array.filter() returns an array of items, so the the Products are actually under. category[0].Products. Use Array.find() instead of a filter, because it returns only a single item. — Ori Drori
– Ori Drori, Commented Feb 15, 2022 at 19:19

Anh Tú Mai · Accepted Answer · 2022-02-15 19:38:19Z

category is a list, not a single object. The output of an Array.filter is always a list. That is why: category.Product is undefined.

If you want to find a category with the name Rice, you can change the code to:

import React, { useContext } from "react";
import { MenuContext } from "../context/menuContext";

function Category() {
  const [categoryItems] = useContext(MenuContext);

  const category = categoryItems.find(
    (element) => element.CategoryName === "Rice",
  ); // change `filter` to `find` and `==` to `===`

  console.log(category);

  return (
    <div>
      <h1>Category Page</h1>

      {category && // add this because category can be undefined
        category.Products.map((productItem) => (
          <h3 key={productItem.Id}>{productItem.ProductName}</h3>
        ))}
    </div>
  );
}
export default Category;

If it still does not work, show the error and also console.log category.Products

GʀᴜᴍᴘʏCᴀᴛ · Accepted Answer · 2022-02-15 19:55:02Z

1

When you used the method filter it returns as an array:

category.map(()=>)

or use the method to find the item product in category:

const find = category.find(elem=>elem.product)
find.map(()=>)

edited Feb 15, 2022 at 19:55

GʀᴜᴍᴘʏCᴀᴛ

9,08620 gold badges91 silver badges165 bronze badges

answered Feb 15, 2022 at 19:46

Vida Hedayati

3361 silver badge8 bronze badges

Collectives™ on Stack Overflow

How to use .filter inside ReactJs Component

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related