The `getOptionLabel` method of Autocomplete returned undefined instead of a string for []

Viewed 529

I am encountering this error The getOptionLabel method of Autocomplete returned undefined instead of a string for [] in creating a storybooks, in the initial load there is undefined value on searchbox (please see on the screenshot) with the error of The getOptionLabel method of Autocomplete returned undefined instead of a string for [] in the console, and when i start typing, I also received this error LocationSearch.js:202 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'findLocationByAddress') how to solve this error? please help.

enter image description here

Autocomplete.js

const propTypes = {
   getOptionLabel: PropTypes.func,
   onChange: PropTypes.func,
   value: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
}

const defaultProps = {
   getOptionLabel: () => {},
   onChange: () => {},
   value: [],
   
}
const LocationSearch = ({
   getOptionLabel,
   onChange,
   value,

}) => {
 const [options, setOptions] = useState([]);
 const onInputChangeHandler = (e, inputString, reason) => {
    const { data: searchLocation } = await getLocations({
        variables: {
           placeSearch: {
              address: inputString,
              },
           },
        });
    setOptions(searchLocation.findLocationByAddress || []);
  };

 <Autocomplete
    freeSolo={freeSolo}
    getOptionLabel={getOptionLabel}
    onInputChange={onInputChangeHandler}
    options={uniqBy(
      multiple
        ? [...options, ...value]
        : value
        ? [...options, value]
        : options,
      'name'
    )}
}

.storybooks/preview

const withThemeProvider = (Story, context) => {
  return (
    <StyledEngineProvider injectFirst>
      <MockedProvider>
        <Story {...context} />
      </MockedProvider>
    </StyledEngineProvider>
  );
};

export const decorators = [withThemeProvider];

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  apolloClient: {
    MockedProvider,
  },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

Autocomplete.stories.js

import AutoCompleteSearch from './AutoComplete';
import { GETLOCATIONNAME } from '../services/location.gql';
const argTypes = {
  options: {
    defaultValue: [
      { name: 'Usa' },
      { name: 'Russia' },
      { name: 'Japan' },
      { name: 'UK' },
    ],
    getOptionLabel:{
        defaultValue:(options)=>{
            return options.name
    }},
  },
}

const Template = (args) => <AutoCompleteSearch {...args} />;

export const AutoCompleteSearchBar = Template.bind({});

LocationSearchBar.parameters = {
    
    apolloClient: {
        mocks: [
          {
            request: {
              query: GETLOCATIONNAME,
              variables: {
                placeSearch: {
                  address: [],
                },
              },
            },
            result: {
                data:{
                    findLocationByAddress: {}
                }
            },
          }
        ],
      }
}

export default {
  argTypes,
  title: 'Inputs/Fields',
};

../services/location.gql

export const GETLOCATIONNAME = gql`
  query FindLocationByAddress($placeSearch: location!) {
    findLocationByAddress(placeSearch: $placeSearch) {
      name
      address {
        street1
        street2
        city
        state
        zipCode
        country
      }
    }
  }
`;
1 Answers

In Autocomplete.stories.js, argTypes has getOptionLabel inside options object. It should be outside at the top level instead.

Autocomplete.stories.js

...
const argTypes = {
  options: {
    defaultValue: [
      { name: 'Usa' },
      { name: 'Russia' },
      { name: 'Japan' },
      { name: 'UK' },
    ],
  },
  getOptionLabel: {
      defaultValue: (options) => {
          return options.name
  }},
}
...
Related