Getting issue while adding address

[rahul138]

We are using this component and it is working fine but one of our use case we are getting error which breaks whole UI
and reason seems to be null "place_id" from null value in getOptionValue={({ value }) => value.place_id}

Few snippet from error are as shown below.
Let me know if there is a quick fix or any suggestion for me.

_index.es.js:38 Uncaught TypeError: Cannot read properties of null (reading 'place_id')
at Object.getOptionValue (index.es.js:38:106900)
at Ko (index.es.js:38:70387)
at eval (index.es.js:38:70661)
at Array.some ()
at er (index.es.js:38:70636)
at Jo (index.es.js:38:69653)
at eval (index.es.js:38:69933)
at Array.map ()
at Uo (index.es.js:38:69734)
at eval (index.es.js:38:92110)
getOptionValue @ index.es.js:38
Ko @ index.es.js:38
eval @ index.es.js:38
er @ index.es.js:38
Jo @ index.es.js:38
eval @ index.es.js:38
Uo @ index.es.js:38
eval @ index.es.js:38
value @ index.es.js:38
applyDerivedStateFromProps @ react-dom.development.js:12425
updateClassInstance @ react-dom.development.js:13035
updateClassComponent @ react-dom.development.js:17432
beginWork @ react-dom.development.js:19073
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
beginWork$1 @ react-dom.development.js:23959
performUnitOfWork @ react-dom.development.js:22774
workLoopSync @ react-dom.development.js:22702
renderRootSync @ react-dom.development.js:22665
performSyncWorkOnRoot @ react-dom.development.js:22288
eval @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
scheduleUpdateOnFiber @ react-dom.development.js:21888
enqueueSetState @ react-dom.development.js:12467
Component.setState @ react.development.js:365
eval @ index.es.js:38
eval @ index.es.js:38
(anonymous) @ places_impl.js:62
(anonymous) @ places_impl.js:15
e @ places_impl.js:11
c @ common.js:160
(anonymous) @ AutocompletionService.GetPredictionsJson?1sabc&4sen-US&15e3&21m1&2e1&callback=xdc._r5mph3&key=AIzaSyDP4nU4OC_vImXqOSgLytA0-T9PWtzZBFo&token=118117:1
react-dom.development.js:20085 The above error occurred in the component:

at o (webpack://sandy-onboarding/./node_modules/react-google-places-autocomplete/build/index.es.js?:38:70930)
at o (webpack://sandy-onboarding/./node_modules/react-google-places-autocomplete/build/index.es.js?:38:97434)
at r (webpack://sandy-onboarding/./node_modules/react-google-places-autocomplete/build/index.es.js?:38:94768)
at eval (webpack://sandy-onboarding/./node_modules/react-google-places-autocomplete/build/index.es.js?:38:103710)
at div
at div
at Transition (webpack://sandy-onboarding/./node_modules/react-transition-group/esm/Transition.js?:131:30)
at eval (webpack://sandy-onboarding/./node_modules/react-bootstrap/esm/TransitionWrapper.js?:14:3)
at eval (webpack://sandy-onboarding/./node_modules/react-bootstrap/esm/Collapse.js?:50:3)
at eval (webpack://sandy-onboarding/./node_modules/react-bootstrap/esm/AccordionCollapse.js?:20:7)
at eval (webpack://sandy-onboarding/./node_modules/react-bootstrap/esm/AccordionBody.js?:18:7)
at div
at eval (webpack://sandy-onboarding/./node_modules/react-bootstrap/esm/AccordionItem.js?:16:7)
at div
at eval (webpack://sandy-onboarding/./node_modules/react-bootstrap/esm/Accordion.js?:37:70)
at Location (webpack://sandy-onboarding/./src/web/pages/MyAccount/SetupFarm/Location.tsx?:56:23)
at div
at eval (webpack://sandy-onboarding/./node_modules/react-bootstrap/esm/Col.js?:64:8)
at div
at eval (webpack://sandy-onboarding/./node_modules/react-bootstrap/esm/Row.js?:12:3)
at div
at eval (webpack://sandy-onboarding/./node_modules/react-bootstrap/esm/createWithBsPrefix.js?:24:5)
at form
at eval (webpack://sandy-onboarding/./node_modules/react-bootstrap/esm/Form.js?:50:3)
at div
at div
at eval (webpack://sandy-onboarding/./node_modules/react-bootstrap/esm/ModalDialog.js?:12:3)
at div
at Transition (webpack://sandy-onboarding/./node_modules/react-transition-group/esm/Transition.js?:131:30)
at eval (webpack://sandy-onboarding/./node_modules/react-bootstrap/esm/TransitionWrapper.js?:14:3)
at eval (webpack://sandy-onboarding/./node_modules/react-bootstrap/esm/Fade.js?:30:3)
at DialogTransition
at eval (webpack://sandy-onboarding/./node_modules/@restart/ui/esm/Modal.js?:67:7)
at eval (webpack://sandy-onboarding/./node_modules/react-bootstrap/esm/Modal.js?:77:3)
at OnboardingSetupFarmPage (webpack://sandy-onboarding/./src/web/pages/MyAccount/SetupFarm/Index.tsx?:129:26)
at div
at eval (webpack://sandy-onboarding/./node_modules/react-bootstrap/esm/Col.js?:64:8)
at div
at eval (webpack://sandy-onboarding/./node_modules/react-bootstrap/esm/Row.js?:12:3)
at div
at eval (webpack://sandy-onboarding/./node_modules/react-bootstrap/esm/Container.js?:15:3)
at BaseLayout (webpack://sandy-onboarding/./src/web/components/layouts/BaseLayout.tsx?:56:25)
at RoutedComponent (webpack://sandy-onboarding/./src/core/components/RoutedCmp.tsx?:42:27)
at Route (webpack://sandy-onboarding/./node_modules/react-router/esm/react-router.js?:647:29)
at Switch (webpack://sandy-onboarding/./node_modules/react-router/esm/react-router.js?:849:29)
at Route (webpack://sandy-onboarding/./node_modules/react-router/esm/react-router.js?:647:29)
at ScrollToTop (webpack://sandy-onboarding/./src/core/components/ScrollToTop.tsx?:13:26)
at C (webpack://sandy-onboarding/./node_modules/react-router/esm/react-router.js?:904:37)
at Router (webpack://sandy-onboarding/./node_modules/react-router/esm/react-router.js?:266:30)
at BrowserRouter (webpack://sandy-onboarding/./node_modules/react-router-dom/esm/react-router-dom.js?:57:35)
at AppRouter
at CmpContainer (webpack://sandy-onboarding/./src/core/components/CmpContainer.tsx?:45:80)
at App
at PersistGate (webpack://sandy-onboarding/./node_modules/redux-persist/es/integration/react.js?:38:5)
at Provider (webpack://sandy-onboarding/./node_modules/react-redux/es/components/Provider.js?:15:20)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
logCapturedError @ react-dom.development.js:20085
update.callback @ react-dom.development.js:20113
callCallback @ react-dom.development.js:12318
commitUpdateQueue @ react-dom.development.js:12339
commitLifeCycles @ react-dom.development.js:20731
commitLayoutEffects @ react-dom.development.js:23421
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23146
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22985
performSyncWorkOnRoot @ react-dom.development.js:22324
eval @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
scheduleUpdateOnFiber @ react-dom.development.js:21888
enqueueSetState @ react-dom.development.js:12467
Component.setState @ react.development.js:365
eval @ index.es.js:38
eval @ index.es.js:38
(anonymous) @ places_impl.js:62
(anonymous) @ places_impl.js:15
e @ places_impl.js:11
c @ common.js:160
(anonymous) @ AutocompletionService.GetPredictionsJson?1sabc&4sen-US&15e3&21m1&2e1&callback=xdc.r5mph3&key=AIzaSyDP4nU4OC_vImXqOSgLytA0-T9PWtzZBFo&token=118117:1
react-dom.development.js:11340 Uncaught TypeError: Cannot read properties of null (reading 'place_id')
at Object.getOptionValue (index.es.js:38:106900)
at Ko (index.es.js:38:70387)
at eval (index.es.js:38:70661)
at Array.some ()
at er (index.es.js:38:70636)
at Jo (index.es.js:38:69653)
at eval (index.es.js:38:69933)
at Array.map ()
at Uo (index.es.js:38:69734)
at eval (index.es.js:38:92110)

[addegbenga]

@rahul138 can share your use-case? that would help narrow where the issue is coming from.
Someone might be able to help.

[go-diego]

@rahul138 Try making sure that selectProps.value.value isn't undefined

<GooglePlacesAutocomplete
      autocompletionRequest={{
        componentRestrictions: {
          country: ["us"],
        },
      }}
      minLengthAutocomplete={3}
      apiKey={process.env.NEXT_PUBLIC_GOOGLE_API_KEY}
      onLoadFailed={(error) =>
        console.error("Could not inject Google script", error)
      }
      selectProps={{
        components: {
          IndicatorSeparator: undefined,
          DropdownIndicator: undefined,
          Control,
          Option,
          Menu,
          ValueContainer,
        },
        placeholder: "",
        value: {
         // address shouldn't be undefined here. I can reproduce the error you describe if it is undefined
          value: address || {},
          label: addressLabel,
        },
        onChange: handleAddressChange,
        isClearable: true,
        pageSize: 3,
        TextFieldProps: {
          InputLabelProps: {
            shrink: addressLabel === "" ? undefined : true,
          },
        },
      }}
    />

[Tintef]

I found it weird that the value returned from google places API doesn't have a place_id, can you provide a repo to reproduce?