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.
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
}
}
}
`;
