Фильтрация 2 массивов для отображения значения в React / JSX

Question

Я пытаюсь отобразить список предметов в React.Я перебираю список со всеми возможными значениями interests и сравниваю его с другим списком с подмножеством этих значений event.Interests.Я сравниваю _id s, сохраненные в списке подмножеств, с _id s в полном списке.

{console.log(e === interest._id)} возвращает значение true 5 раз, а проценты. Label, если он зарегистрирован, вернет имякаждое из этих значений.

Однако ни одно из них не отображается вообще в пользовательском интерфейсе.

event && interests && interests.forEach(interest => (
  event.Interests.filter((e, i) => {
    {console.log(e === interest._id)}
    if (e === interest._id) {
      return <div key={i} className={classNames(classes.categoryContainer, classes.leftPadding)}>
        <div className={classes.categoryWrapLower}>
          <p>{interest.Label}</p>
        </div>
      </div>
    }
  })
))

Что я делаю не так?

ОБНОВЛЕНИЕ

Основываясь на рекомендации, опубликованной samanime, я изменил forEach и, как ни странно, фильтр на map, и он отлично работал.

      event && interests && interests.map(interest => (
        event.Interests.map((e, i) => {
          {console.log(e === interest._id)}
          if (e === interest._id) {
            return <div key={i} className={classNames(classes.categoryContainer, classes.leftPadding)}>
              <div className={classes.categoryWrapLower}>
                <p>{interest.Label}</p>
              </div>
            </div>
          }
        })
      ))

Answer 1

Измените forEach() на map().

Функция forEach() не имеет возвращаемого значения, поэтому, если вы что-либо возвращаете оттуда, она просто отбрасывается.

Функция map() соберет все возвращенные значения (включая undefined, если вы ничего не возвращаете) и вернет их в виде массива.

В вашем случае вам нужно использовать map()а затем также добавьте .filter(Boolean) после карты, чтобы удалить все undefined для сценариев, где вы ничего не возвращаете.

event && interests && interests.map(interest => /* your code */).filter(Boolean)