Отображение повторяющегося HTML-элемента с условным значением

Question

У меня есть много значков начальной загрузки другого цвета, отображаемых в столбце таблицы.Этот значок будет отображаться, если значение существует.Значок отличается по имени класса и имени стиля, используя разные цвета для каждого значка.Я думаю, что элемент HTML является повторяющимся.Могу ли я в любом случае повторно использовать элемент или сделать свой код проще?

        <td className="text-nowrap">
          {asset.kfc && (
            <span className="badge badge-primary">Kentucky Fried Chicken</span>
          )}{' '}
          {asset.mcd && (
            <span className="badge badge-success">Mc Donald</span>
          )}{' '}
          {asset.sub && (
            <span className="badge badge-danger">Subway</span>
          )}{' '}
          {asset.dom && (
            <span className="badge" style={{backgroundColor: 'pink'}} >Domino</span>
          )}{' '}
          {asset.krg && (
            <span className="badge" style={{backgroundColor: 'cyan'}} >Kenny Rogers Roasters</span>
          )}{' '}
        </td>

У меня 9 таких значков.Заранее спасибо

Answer 1

Если кому интересно.Вот решение:

  const obj = {
    kfc: {title: 'Kentucky Fried Chicken', class: 'badge-primary'},
    mcd: {title: 'Mc Donald', class: 'badge-success'},
    sub: {title: 'Subway', class: 'badge-danger'},
    pzh: {title: 'Pizza Hut', color: 'cyan'},
    dom: {title: 'Domino Pizza', color: 'pink'},
  };

  const badgeElem = asset =>
    Object.keys(obj).map(
      key =>
        asset[key] && (
          <Fragment>
            <span
              className={`badge ${obj[key].class}`}
              style={{backgroundColor: obj[key].color}}>
              {obj[key].title}
            </span>{' '}
          </Fragment>
        ),
    );

Код таблицы:

<td className="text-nowrap">{badgeElem(asset)}</td>

Answer 2

Сохраните заголовок и имя класса каждого диапазона в переменной, здесь, obj. Предполагая, что сборка является объектом, сопоставьте ключи, чтобы вернуть span, содержащий.

    var obj = {
        kfc: {title: 'Kentucky Fried Chicken', class: 'badge-primary'},
        mcd: {title: 'KMc Donald', class: 'badge-primary'},
        sub: {title: 'Subway', class: 'badge-primary'} 
    }

    Object.keys(asset).map(key=>(
        { assest[key] &&
            <span className={'badge '+obj[key].class} >{obj[key].title}</span>
        }
    ))