предотвратить повторение названия

Question

Я возился с несколькими условным рендерингом методов, но я не могу найти тот, который работает.

<div className="tags">
  {adv_event.types.map(type => (
    <div className="tag" key={type.tid}>
      <h5 className="body-color">Event Type:</h5>
      <Link to={`/events/category/${type.slug}`} className="home-link track-click">{type.name}</Link>
    </div>
  ))}
</div>

Прямо сейчас <h5 className="body-color">Event Type:</h5> повторяется длякаждый тег. Есть ли способ показать заголовок один раз, не добавляя его перед каждым тегом?

Answer 1

Переместить его за пределы цикла?

<div className="tags">
  {adv_event.types.length > 0 ? (<h5 className="body-color">Event Type:</h5>) : ''}
  {adv_event.types.map(type => (
    <div className="tag" key={type.tid}>
      <Link to={`/events/category/${type.slug}`} className="home-link track-click">{type.name}</Link>
    </div>
  ))}
</div>