как правильно добавить пробел и запятую в JSX

Question

У меня есть кусок кода в Javascript (с использованием компонента React). Существует переменная, которая генерирует список элементов внутри div. Меня попросили добавить запятую и пробел после каждого элемента, но не после последнего. Я пробовал много способов их добавления (как с, так и без,), но ни один из них не работает.

Нужно ли мне добавлять новую переменную, которая измеряет длину списка элементов, а не добавить запятую и пробел после последней?

Кроме того, я думаю, что лучшим способом было бы поставить запятую и пробел вне тегов span , верно? Пожалуйста, помогите, JSX немного смущает меня.

<div className="column" data-test="items">
    {items.map(s => (
        <span key={s.id}>{s.name}</span>
    ))}
</div>

был бы благодарен за любые предложения, как решить эту проблему.

Answer 1

Самый простой способ добавить запятую в качестве пробела - это место, где вы действительно вписываете name в список, используя конкатенацию строк. А поскольку вы не хотите добавлять запятую в последний элемент, вы можете проверить индекс элемента на карте.

Вот пример из предоставленного вами кода

<div className="column" data-test="items">
    {items.map((s, index) => (
        <span key={s.id}>{`${s.name}${index !== items.length - 1 ? ', ' : ''}`}</span>
    ))}
</div>

Второй параметр в карте - это индекс элемента "s" в массиве.

Чтобы сделать проверку более понятной, я использую троичный оператор, однако вы можете использовать более компактный синтаксис ES6 упоминается в другом ответе @Vlad тоже

Answer 2

Давайте попробуем это:

<div className="column" data-test="items">
    {items.map((s, i) => (
        <span key={s.id}>{s.name}{(items.length - 1 !== i) && ', '}</span>
    ))}
</div>

Answer 3

<div className="column" data-test="items">
    {items.map(s => (
        <span key={s.id}>{s.name} 
        {index!==index.lengths-1 ? ", "
        : void 0}
        </span>
    ))}
</div>