Массив React Elements не рендерится с помощью JSX

Question

Хорошо, я пытаюсь выяснить, почему мой массив элементов React не рендерится.В конечном итоге я пытаюсь исключить использование dangerouslySetInnerHtml из нашей кодовой базы, которая используется для включения тега <strong> в середине длинной текстовой строки.Я не нашел никаких заранее запеченных решений для этого, поэтому я строю свое собственное (также открытое для слушания об альтернативах).

Решение, которое я пытаюсь реализовать, состоит в создании массива <span>и <strong> теги, использующие цикл while.Вот вспомогательная функция, в которой я создаю массив:

export const alternateBold = ({ primaryStrings = [], secondaryStrings = [] }) => 
  {
  const content = []
  while (primaryStrings.length || secondaryStrings.length) {
    if (primaryStrings.length) {
      const textVal = primaryStrings.shift()
      content.push(<span key={ textVal }>{ textVal }</span>)
    }

    if (secondaryStrings.length) {
      const boldVal = secondaryStrings.shift()
      content.push(<strong key={ boldVal }>{ boldVal }</strong>)
    }
  }
  return content
}

content на данный момент содержит элементы, которые выглядят следующим образом:

{
  $$typeof: Symbol(react.element),
  key: "text content of the tag",
  props: {
    children: "text content of the tag",
    key: (...)
  },
  get key: ƒ (),
  __proto__: Object,
  ref: null,
  type: "span",
  _owner: ReactCompositeComponentWrapper {_currentElement: {…}, _rootNodeID: 0, _compositeType: 0, _instance: BannerSection, _hostParent: ReactDOMComponent, …},
  _store: {validated: false},
  _self: null,
  _source: null,
  __proto__: Object,
}

Так что моя путаница проистекает из того факта, чтоэтот список элементов не отображается (тег <div> ниже, когда передается массив от этого помощника. Вот статический метод, в котором я вызываю функцию помощника выше при условии, что присутствует свойство textGroups. { textGroup } отображается как ожидается, когда передается обычная строка (itemContent.text):

static renderTagDefault (itemContent) => {
    const textGroup = {}.hasOwnProperty.call(itemContent, 'textGroups') ?
              alternateBold(itemContent.textGroups)
              : itemContent.text
    return (
        <div>
            { textGroup }
        </div>
    )
}

, которая вызывается отдельным статическим методом renderTitle:

static renderTitle(innerText, callToAction) {
    return (
        <div>
            {
                innerText.map(
                    (key, i) => (
                            <div key={ i }>
                                { BannerSection.renderTagDefault(key) }
                            </div>
                        )
                )
            }
        </div>
    )
}

, которыйвызывается в методе рендеринга компонента:

class BannerSection extends React.Component {
render() {
    const {
        className,
        innerText,
        callToAction
    } = this.props

    return (
        <section>
            <section>
                { BannerSection.renderTitle(innerText, callToAction) }
            </section>
        </section>
    )
}

Нет ошибок, но оболочка пуста. Я не вижу какой-либо важной разницы между созданием / рендерингом этого массива и тем, что описано здесь:https://codepen.io/gaearon/pen/jrXYRR?editors=0011

Любая помощь с этим будет принята с благодарностью.