Как передать массив материала-ui dataSource реквизит

Question

Я использую материал-ui для компонента. В материале-ui есть компонент автозаполнения, который я хочу использовать, чтобы показать список значков с иконкой. Если я передаю только MenuItem в dataSource, я получаю пустое поле ввода без списка. Если я пытаюсь передать ключ и значение, как в моем коде, я получаю сообщение об ошибке неожиданного токена.

Вот мой код

console.log('this.props.fetchIcon', this.props.fetchIcon.icons); 
const listOfIcon = _.map(this.props.fetchIcon.icons, (icon) => { 
         return (text: {icon.name}, value: (<MenuItem primaryText={icon.name} secondaryText={icon.name} />)); 
        }); 
return (
    <div className="device-action"> 
    <Dialog 
     title="Add a Tab" 
     actions={actions} 
     modal={false} 
     open={this.props.createTab.open} 
     onRequestClose={this.props.CancelDeviceEvent} 
    > 
    <div className="icon"> 
     <AutoComplete 
     floatingLabelText="select any icon" 
     filter={AutoComplete.noFilter} 
     openOnFocus 
     dataSource={listOfIcon} 
     /> 
    </div> 
    </Dialog> 
    </div> 
); 

редукторы

const initialState = { 
    fetching: false, 
    fetched: true, 
    icons: [], 
    error: null, 
}; 

export const fetchIconReducer = (state = initialState, action) => { 
    switch (action.type) { 
    case 'FETCH_ICONS_START': 
     return { ...state, fetching: true }; 
    case 'FETCH_ICONS_ERROR': 
     return { ...state, fetching: false, error: action.payload }; 
    case 'RECIEVE_ICONS': 
     return { ...state, fetching: false, fetched: true, icons: action.payload }; 
    default: 
     return state; 
    } 
}; 

this.props.fetchIcon.icons консоли следующие

Answer 1

Вы должны вернуть массив объектов для dataSource. Попробуйте следующее.

_.map(this.props.fetchIcon.icons, (icon) => { 
    return { 
     text: icon.name, 
     value: <MenuItem primaryText={icon.name} secondaryText={icon.name} /> 
    } 
});