Блог

У меня возникли проблемы с правильным отображением списка элементов, возвращаемых из api с помощью библиотеки react-bootstrap-table2.

Возвращаемый json имеет следующую структуру:

[{«имя»:»Клиент1″,»list_of_items»:[«пункт 1″,»пункт 2″,»пункт 3″,»пункт 4″,»пункт 5»]}]

Когда он отображается, все «list_of_items» выполняются вместе, как одна большая строка (например: item1item2item3item4item5).

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

Вот как выглядит мой код прямо сейчас в App.js файл:

 import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
import BootstrapTable from 'react-bootstrap-table-next';

export const App = () => {
    const clients = [
        {
            name: 'Client1',
            list_of_items: ['item1', 'item2', 'item3', 'item4', 'item5']
        },
        {
            name: 'Client2',
            list_of_items: ['item1', 'item2', 'item3', 'item4', 'item5']
        },
        {
            name: 'Client3',
            list_of_items: ['item1', 'item2', 'item3', 'item4', 'item5']
        }];
    const columns = [{
        dataField: 'name',
        text: 'Client'
    }, {
        dataField: 'list_of_items',
        text: 'List of Items'
    }];

return (
    <div>
        <BootstrapTable
            striped
            hover
            keyField='name'
            data={clients}
            columns={columns}/>
    </div>
);
 

}