Как в JSX отобразить количество элементов функции map?

Question

[nivaech]

Есть страница с товарами. Функция map проходит по массиву с товарами с базы, отбирает товары заданной категории ("Some category" ), и выводит их на экран. Хочу, чтобы выше отображалось количество выведенных товаров. Как отобразить длину нового массива, созданного map?

Вот код.

<div className="products-list">
                        <Title title="Some Title" />
                        <div className="products-container">
                          <p> "Количество элементов категории в map здесь" </p>
                        </div>
                        <div className="products-container">
                        {filteredProducts.map(product => product.category === "Some, category" && 
                          <ProductCard 
                            key={product.id}
                            product = {product}
                          />
                        )}
                        </div>
                      </div>

Comments

[WapSter]

.map это не функция, а метод

Answer 1

[kova1ev]

const products = filteredProducts.filter(product => product.category === "Some, category").map (item => {
                          return (
                          <ProductCard 
                            key={item.id}
                            product = {item}
                          />)} )
return (
  <div className="products-list">
                        <Title title="Some Title" />
                        <div className="products-container">
                          <p> {products.length} </p>
                        </div>
                        <div className="products-container">
                        {products}
                        </div>
                      </div>
)

Comments

[Алексей Уколов]

Это не будет работать как ожидается, потому что здесь не происходит фильтрация и количество элементов не меняется.

[nivaech]

Делал также. Это выглядит логично и правильно, но почему-то отображается не количество элементов нового массива map, а количество элементов всей базы товаров.

[kova1ev]

Nivaech, Алексей Уколов, да, все верно говорите, поторопился с решением, нужно сначала фильтровать, потом мапить, поправил.

Answer 2

[LEXA_JA]

Длина нового массива, созданного map, будет всегда равна длине оригинального массива. Просто в тех случаях, где условие не выполняется, там будет на реактовский элемент, а false. Нужно сделать filter вместо map.

const products = filteredProducts.filter(product => product.category === "Some, category");

const count = products.length;

return (
  <div className="products-list">
    <Title title="Some Title" />
    <div className="products-container">
        <p> {count} </p>
    </div>
    <div className="products-container">
      {products.map(product => (
          <ProductCard 
             key={product.id}
             product = {product}
           />
       ))}
     </div>
</div>
);

Comments

[nivaech]

Работает. Спасибо за просвещение.

Answer 3

[Антон Спирин]

Вы неправильно используете метод map. Он используется для преобразования данных, но никак не для фильтрации. Для фильтрации используют соответствующий метод filter:

const someCategoryProducts =
  filteredProducts.filter(product => product.category === "Some, category");

return (
  <div>
    <div>{someCategoryProducts.length}</div>
    <div>{someCategoryProducts.map(mapFn)}</div>
  <div>
);

Answer 4

[Алексей Уколов]

const items = filteredProducts.filter((product) => product.category === "Some, category");

return (
    <div className="products-list">
        <Title title="Some Title" />
        <div className="products-container">
            <p>{items.length}</p>
        </div>
        <div className="products-container">
            {items.map((product) => (
                <ProductCard
                    key={product.id}
                    product = {product}
                />
            )}
        </div>
    </div>
);