How to display the number of elements of the map function in JSX?

Question

JavaScript

There is a product page. The map function traverses the array of products from the base, selects the products of a given category ("Some category" ), and displays them on the screen. I want to display the number of displayed products above. How to display the length of the new array created by map?
Here is the code.

<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>

Answer 1

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>
)