Отображение разделенных запятыми ссылок в React с переносом слов

Question

Я пытаюсь отобразить ссылки из списка. Все работает нормально, пока мои ссылки не перейдут на следующую строку.

const relatedLink = _.map(personList, (person, index) => {
        const comma = index
            ? <span>,&nbsp;</span>
            : null;

        return (
            <span key={"key_" + person.name}
                  className="related-names-link">
            {comma}
                <NameLink
                    personId= {orderIdAndNumber.orderId}
                    key={"person_link_" + person.name}>
                    {person.name}
                </NameLink>
            </span>
        );
    });

    <div className="related-names-links">
         {relatedLink}
    </div>

CSS:

.related-names-links {
        display: flex;
        flex-wrap: wrap;
    }

Когда список становится большим, запятая для первой строки фамилия переходит на следующую строку , вместо этого я хочу, чтобы запятая оставалась в самой первой строке.

Фактический результат:

Jack, Tom, Jerry
, Mickey, Donald, Flintstone

Ожидаемый результат:

Jack, Tom, Jerry,
Mickey, Donald, Flintstone

Я пробовал с ответами from Отображение списка ссылок, разделенных запятыми , но все равно получаю тот же результат.

Answer 1

ваш шаблон содержимого диапазона - , <name>, он должен быть <name>,. переместите {comma} после NameLink, а для проверки запятой проверьте, если index < personList.length - 1.