Can't implement a system with map?

Question

JavaScript

I'm trying to make a system where, in the absence of elements in the array, display a certain text, but it is not displayed. Can you suggest what I need to fix?

<div className={styles.flows__select}>
                {data.user.flows
                  .filter((flow) =>
                    data.offers.filter((x) => x.name === flow.name)[0])
                  .map((flow, index, arr) => {
                    if (arr.length == 0) {
                      return (
                        <div key={index} className={styles['flows__item-empty']}>
                          У вас нет запущенных потоков.
                        </div>
                      )
                    } else {
                      return (
                        <div key={index} className={styles.flows__item}>
                          {flow.name}
                        </div>
                      );
                    }
                  })}
              </div>

Answer 1

The map method invokes a callback function for each array element.
If the array is empty (arr.length === 0), then by definition there are no elements in it.
Accordingly, the callback function will not be called even once.