How to pass an array to material-ui dataSource props

milan

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

Pranesh Ravi

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

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

How to pass props to the inputComponent material-ui?

How in Material UI to pass a props or a condition to a nested style method

How to pass a function as props to a component of Material-UI for React?

How to pass props to to material-ui styles in a sub-selector

How to pass props to a material-ui styled component?

How do I add material Icons to an array and pass it through props

Material UI Tab pass props to component

Pass Accessibility Props to Material UI Button

Material-UI : Pass props to useStyles when using Array.map()

How to edit object and pass new one to array? ReactJS, Material UI

How to pass props while routing on click of Listitem of Material UI using v6

ReactJS: How to pass props on styled material-UI v5xx?

How to compute and pass array in props?

Pass props to makeStyles and use in CSS shorthand property in Material UI

How to pass a handler to onClick with Typescript and material UI

How to pass vue component props array of object?

How to pass as a props an array of String and JSX with NextJs?

How to change button props based on breakpoints in Material UI

How to use Material-ui@next TextField error props

How to use react-hook-form with props and material UI

How to change props in a Material UI component according to URL?

How to add multiple classes in Material UI using the classes props

How type material ui props for custom PopperComponent with Typescript

How to use popperComponent Props while using useAutoComplete in material ui reactJS

How to use material ui sx props with a styles object?

How to change Material UI component property according to props

Material UI: How to display my array of objects into a material ui table

Passing props to material UI style

onclick props not working with Material UI?