CODEWITHSUNDEEP
javascriptarraysreactjsreduxmaterial-ui
milan
milan

Reputation: 2417

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

Upvotes: 0

Views: 1778

Answers (1)

Pranesh Ravi
Pranesh Ravi

Reputation: 19113

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

Upvotes: 1

Related Questions