Есть массив городов (приходит из пропсов), который нужно отсортировать по алфавиту и вывести города списком, который стилизуется другим реакт компонентом. Использую 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
let list = '';
используйтеlet list = []
args.cities
Так же лучше добавьте компонент целиком(ну ненужное лучше удалить из него)