Ternary operator doesn't work as expected

Question

I have a map component where I need to pass default coordinates which will be coming from custom useSwr hook. After fetching the data I pass them to the state and render it if the values or not undefined. Apparently I do something wrong and its not working properly since Map component is being called even when the values are undefined which results in me getting this error:

Failed prop type: Invalid prop `center` supplied to `o`.

This is how I handle state:

const {
    locationDetails,
    locationSessions,
    isLoading,
    isError,
  } = useLocations();

  const [mapCenter, setMapCenter] = useState({ lat: null, lng: null });
  useEffect(() => {
    setMapCenter({
      lat: locationDetails?.location_lat,
      lng: locationDetails?.location_lon,
    });
  }, [locationDetails]);

on render:

{mapCenter?.lat !== undefined &&
                    mapCenter?.lng !== undefined ? (
                      <GoogleMapReact
                        bootstrapURLKeys={{
                          key: "My api key",
                        }}
                        center={mapCenter}
                        zoom={14}
                      >
                        <IconMaps
                          name="PinDefault"
                          width="21px"
                          height="31px"
                          lat={parseFloat(location_lat)}
                          lng={parseFloat(location_lon)}
                        />
                      </GoogleMapReact>
                    ) : null}

`null === undefined` is `false`, `null == undefined` is true :) — Konstantin, Jan 14 '21 at 12:21
In your `useEffect`, you update the state even if the `locationDetails` is `null`, which then sets `lat = null` and `lng = null`. In your render function, you check if it's `undefined` instead of `null` because of the strict type check (`!==`). Check for nulls or do a non-strict comparison (`!=`) — nbokmans, Jan 14 '21 at 12:21
Thanks for the comments. I have tried both of proposed solutions but none of them changed anything. Still having same problem as before. — em_code, Jan 14 '21 at 12:28
You want to execute the first expression even if the lang and lat is set to null? — Prathamesh Koshti, Jan 14 '21 at 12:34
@PrathameshKoshti Not really, I want to execute map if lat and lng values are there. — em_code, Jan 14 '21 at 12:41
@Emin then you don't need to check if it's undefined or not, optional chaining will return whatever the value is associated with it, so I would recommend you to remove `!== undefined` from both condition let them be like this: `mapCenter?.lat && mapCenter?.lng` So if the false values are there it will execute second expression — Prathamesh Koshti, Jan 14 '21 at 12:45
You are right but still changing the comparison doesn't change the behaviour. Map is still inserted in the DOM. — em_code, Jan 14 '21 at 12:47

score 1 · Accepted Answer · answered Jan 14 '21 at 12:32

1

So you're saying that if you do this

{mapCenter?.lat != undefined && // non-strict
                    mapCenter?.lng != undefined ? ( // non-strict
                      <GoogleMapReact
                        bootstrapURLKeys={{
                          key: "My api key",
                        }}
                        center={mapCenter}
                        zoom={14}
                      >
                        <IconMaps
                          name="PinDefault"
                          width="21px"
                          height="31px"
                          lat={parseFloat(location_lat)}
                          lng={parseFloat(location_lon)}
                        />
                      </GoogleMapReact>
                    ) : null}

It still returns the map? Try returning something else apart from null (like a piece of text, just for testing purposes), because I feel like there may be other problems than the ternary.

answered Jan 14 '21 at 12:32

Konstantin

1,390
6
18

This throws same error as well without rendering the text, one can think that it might be because mapCenter.lat is set to null at the beginning. I have changed the comparison to `mapCenter?.lat != undefined || mapCenter?.lat != null` which didnt change anything as well. – em_code Jan 14 '21 at 12:44
Can you please log the value of `mapCenter` at the time when the map is rendered (it will be right before the error is thrown)? – Konstantin Jan 14 '21 at 12:48
Thanks a lot Konstantin. That helped me to see my fault, apparently the values were returned as string and it should be passed as numbers. My mistake was not to convert it to number :) – em_code Jan 14 '21 at 12:51
I went into docs of this lib and wasn't understanding what could be happening, glad you've managed to solve this :) – Konstantin Jan 14 '21 at 12:52

Ternary operator doesn't work as expected

1 Answers1