0

Есть массив городов (приходит из пропсов), который нужно отсортировать по алфавиту и вывести города списком, который стилизуется другим реакт компонентом. Использую 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

3
  • Добро пожаловать на сайт ru.SO! как задать хороший вопрос => ru.stackoverflow.com/help/how-to-ask
    – Dev18
    Commented 23 мая в 19:57
  • Вместо let list = ''; используйте let list = []
    – Tsyklop
    Commented 23 мая в 20:12
  • Приведите пример одного элемента из args.cities Так же лучше добавьте компонент целиком(ну ненужное лучше удалить из него)
    – SwaD
    Commented 23 мая в 20:42

1 ответ 1

0

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;
}

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

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.