React Leaflet markers

Question

Does anyone happen to know a good work around for Null/undefined latitude and longitude locations? My code is as follows:

  {

data.map(
        (
          value: {
            Latitude: number
            Longitude: number
          },

          index: Key
        ) => {
          return (
            <>

              <Marker
                key={index}
//if these are null
                position={[value?.Latitude,  value?.Longitude]}
    
              >
 
              </Marker>
            </>
          )
        }
      )}

Originally, I just made both latitude and longitude 0 if the value was null. The problem is that (0,0) is an actual coordinate and does get mapped.

Answer 1

You could return null if latitude or longitude is null or undefined

{data.map(
    (
      value: {
        Latitude: number
        Longitude: number
      },
      index: Key
    ) => {
      if (!value?.Latitude || !value?.Longitude) return null;
      return (
        <>
          <Marker
            key={index}
            position={[value?.Latitude, value?.Longitude]}/>
        </>
      )
    }
  )}