Не получается реализовать систему с map?

Question

[aoebwopwnsbw]

Пытаюсь сделать систему, где в случае отсутствия элементов у массива выводить определенный текст, но он не выводится. Можете подсказать, что мне нужно исправить?

<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

[Rsa97]

Метод map вызывает callback-функцию для каждого элемента массива.
Если массив пустой (arr.length === 0), то элементов в нём нет по определению.
Соответственно, callback-функция не будет вызвана ни одного раза.

Comments

[aoebwopwnsbw]

Это я уже понял, но как тогда мне реализовать то, что я хотел? Всю голову уже сломал

[Rsa97]

aoebwopwnsbw, Извратиться можно через reduce вместо map

.reduce(
  (acc, flow, index) => {
    if (index === 0) {
      acc.shift();
    }
    acc.push(
      <div key={index} className={styles.flows__item}>
        {flow.name}
      </div>
    );
    return acc;
  },
  [
    <div key="0" className={styles['flows__item-empty']}>
      У вас нет запущенных потоков.
    </div>
  ],
)