Ternary statements with possible null/undefined

I am working with an object with the following shape:

{ image: string, previewImg: number }

{ image: string, previewImg: number }

images is just a string with UUIDs separated by commas. If the UUID is for a video they are prefixed with "video-". Example: "abc,xyz,video-abc" I am mapping over a collection of the given shape and previewing a single image for each object, and as you've prob guessed the previewImg decides which image to preview. ex:

shapeCollection.map((shape) => (
  <Image
    src={`<my-s3-bucket>/${shape.image.split(",")[shape.previewImg]}`}
  />
))

shapeCollection.map((shape) => (
  <Image
    src={`<my-s3-bucket>/${shape.image.split(",")[shape.previewImg]}`}
  />
))

So the issue arises when the previewImg selects a video. I need a placeholder image. To solve this I thought a simple Ternary would be sufficient, ie:

{shape.image.split(",")[shape.previewImg]?.includes("video") ? (
// it's a video, use placeholder img
<Image src={placeholder} />
) : (
// not a video
  <Image
    src={`<my-s3-bucket>/${shape.image.split(",")[shape.previewImg]}`}
  />
)}

{shape.image.split(",")[shape.previewImg]?.includes("video") ? (
// it's a video, use placeholder img
<Image src={placeholder} />
) : (
// not a video
  <Image
    src={`<my-s3-bucket>/${shape.image.split(",")[shape.previewImg]}`}
  />
)}

This ends up always showing the false result of the ternary. the funny thing is that if I use

shape.image.split(",").includes("video")

shape.image.split(",").includes("video")

it will show the placeholder image, but then it shows it also shows the placeholder img when the previewImg was intended. I suspect that the ?. is doing something but I have no idea how or why

1 Reply

MordiOP•2y ago

putting this aside with a temp fix that revolves around the img being broken, and if so fallbacks to a static placeholder img

const ImageWithFallback = ({ alt, src, fallbackSrc, ...rest }: any) => {
  const [imgSrc, setImgSrc] = useState(src);

  useEffect(() => {
    setImgSrc(src);
  }, [src]);

  return (
    <Image
      {...rest}
      src={imgSrc}
      alt={alt}
      onLoadingComplete={(result) => {
        if (result.naturalWidth === 0) {
          // Broken image
          setImgSrc(fallbackSrc);
        }
      }}
      onError={() => {
        setImgSrc(fallbackSrc);
      }}
    />
  );
};

const ImageWithFallback = ({ alt, src, fallbackSrc, ...rest }: any) => {
  const [imgSrc, setImgSrc] = useState(src);

  useEffect(() => {
    setImgSrc(src);
  }, [src]);

  return (
    <Image
      {...rest}
      src={imgSrc}
      alt={alt}
      onLoadingComplete={(result) => {
        if (result.naturalWidth === 0) {
          // Broken image
          setImgSrc(fallbackSrc);
        }
      }}
      onError={() => {
        setImgSrc(fallbackSrc);
      }}
    />
  );
};

Gaming

Programming

Ternary statements with possible null/undefined