Вывод списка городов из массива React

Question

Есть массив городов (приходит из пропсов), который нужно отсортировать по алфавиту и вывести города списком, который стилизуется другим реакт компонентом. Использую reactstrap.

Вот код, возможно так будет понятнее:

    const citiesItem = () => {
    let list = '';
    let alphabet = args.cities.sort();

    list += <DropdownItem>Москва</DropdownItem>;
    list += <DropdownItem>Санкт-Петербург</DropdownItem>;

    alphabet.forEach(function(item) {
      list += <DropdownItem>{item}</DropdownItem>;
    });

    return list;
   }

Вот тут должен быть список и выбранный город отображаться в шапке (DropdownToggle):

<UncontrolledDropdown nav inNavbar className='ml15'>
    <DropdownToggle nav caret>
        Options
    </DropdownToggle>
    <DropdownMenu right>
        {citiesItem()}
        <DropdownItem divider />
        <DropdownItem>Reset</DropdownItem>
    </DropdownMenu>
</UncontrolledDropdown>

Но отображается только [object Object]

Не понимаю, что не так. Как потом по клику по городу сделать, чтобы он отображался вместо Options в DropdownToggle

Answer 1

React-элемент - это объект. В данном примере складывается строка и элементы (объекты), из-за этого react-элемент приводится к [object Object].

Как и писал Tsyklop, стоит добавлять их в массив для отображения:

const citiesItem = () => {
   const result = [];
   const sortedCities = [...args.cities].sort(); // обычная сортировка мутабельна

   const defaultCities = ['Москва', 'Санкт-Петербург'];

   [...defaultCities, ...sortedCities].forEach(function(item) {
     result.push(<DropdownItem>{item}</DropdownItem>);
   });

   return result;
}

Это далеко не лучший вариант решения задачи, но оставил так для наглядности.

БЛОГ НА HUSL

Вывод списка городов из массива React

Ответы (1 шт):