How to pass an array to material-ui dataSource props
<p>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. </p>

<p><strong>Here is my code</strong></p>

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

<p><strong>reducers</strong></p>

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

export const fetchIconReducer = (state = initialState, action) =&gt; {
  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;
  }
};
</code></pre>

<p><strong>this.props.fetchIcon.icons consoles following</strong> </p>

<p><a href="https://i.stack.imgur.com/E4kW8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/E4kW8.png" alt="enter image description here"></a></p>