How to print in drop-down list in jxs? - reactjs

Question

How to print in drop-down list in jxs? Actually I'm having drop-down list and by this code i'm getting all the data in one single row while clicking on it but I want it in list. Can anyone help me out for this?
My code:
comboClick () {
var apiBaseUrl = "http://api.eventsacross-stage.railsfactory.com/api/";
var input = this.state.search_event;
let self = this;
let location = [];
let cityArray = [];
axios.get(apiBaseUrl+'v1/events/?on_dashboard=false'+input)
.then(function (response) {
let events = response.data.events;
for(var i = 0; i < response.data.events_count; i++) {
var obj = response.data.events[i];
location.push(obj.locations[0].city);
}
let cityUnique = _.uniq(location, 'city');
cityArray.push(cityUnique);
self.setState({cityArray: cityArray});
})
.catch(function (error) {
console.log(error);
});console.log("cityArray",cityArray);
}
jsx part:
render() {
var cityFilter = [this.state.cityArray ? this.state.cityArray[0] : null];
{console.log("cityFilter",cityFilter)}
return (...
<div className="dropdown text-center">
<button
className="btn btn-default dropdown-toggle"
type="button"
data-toggle="dropdown"
style={{width: "50%"}}
onClick={this.comboClick.bind(this)}>
Place
<span className="caret"></span>
</button>
<ul className="dropdown-menu">
{cityFilter.map(function(city, index){
return <li className="text-center" key={ index }>{city}</li>;
})}
</ul>
</div>
...}