React-Bootstrap Dropdownbutton does not render correctly

Question

I have a react component as follows

export class Foo extends Component {
  constructor(props) {
     super(props);
     this.getItems = this.getItems.bind(this);
     this.state = {
       items : []
     }
  }

  getItems() {
    // axios logic which  sets state.items to array [ "item1", "item2", "item3" ]
     axios.get('...backend', { headers: API_HEADERS })
    .then(response => {
        const items = response.data.Items
        this.setState({items});
    }).catch((error) => {
        console.log(error);
    });
  }
  componentDidMount() {
     this.getItems();
  }
  createDropdown() {
    return (
    <DropdownButton
    bsStyle='primary'
    title='Items'
    onSelect={this.handleSelect.bind(this)}
    >
    {this.state.items.map((item, index) => {
         <MenuItem key={index} value={item} eventKey={index}>{item}</MenuItem>
     })}
    </DropdownButton>
    )
  }
  render() {
    const items = this.createDropdown();
    return (
      ... Grid's, columns and the likes
      {items}
    )
  }
}

When rendering the page the react-boostrap DropdownButton looks as follows DropdropButton react-boostrap

I'm wondering what i'm doing wrong here. Why does the Dropdown not create MenuItem's accordingly to the length of the array?

I don't know whether I'm missing something. Thanks in advance

Answer 1

You are not returning MenuItem in your map. Update your code to return MenuItem.

{this.state.items.map((item, index) => {
         return <MenuItem key={index} value={item} eventKey={index}>{item}</MenuItem>
     })}

OR

{this.state.items.map((item, index) => (
    <MenuItem key={index} value={item} eventKey={index}>{item}</MenuItem>)
)}