milan milan - 2 months ago 26
React JSX Question

How to pass an array to material-ui dataSource props

I am using material-ui for component. There is a autocomplete component in material-ui which i want to use to show the list of icon name with icon. If i pass only MenuItem to dataSource i get an empty input box with no list. If i try to pass key and value like in my code, i get an error of unexpected token.

Here is my code

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


reducers

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 consoles following

enter image description here

Answer

You should return an array of objects for the dataSource. Try the following..

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