If prop is empty/undefined show error before returning the complete component?-CodePudding

I have an ImageBlock component with the following props: url, alt, caption, quality 3 are optional and the url is required.

Now, I want to instantly return the AlertError without the conditional check. Something like a shorthand. I've seen it before, But couldn't find it.

Basically what I am trying to do, is if the URL is not defined instantly return the error before even trying to reach the rest of the code.

I am pretty sure there is a smarter way to do this, but having an if and else is redundant for this code.

Thanks in advance.

import Image from "next/image";
import AlertError from "./Alerts/AlertError";

interface ImageProps {
  url: string;
  alt?: string;
  caption?: string;
  quality?: number;
}

const ImageBlock = ({ url, alt, caption, quality = 75 }: ImageProps) => (
  <div className="max-w-5xl px-6 mx-auto mb-6">
    {url ? (
      <figure className="overflow-hidden rounded-md">
        <Image
          src={url}
          width="1920"
          height="1080"
          layout="responsive"
          quality={quality}
          alt={alt}
        />

        {caption && (
          <figcaption className="flex justify-between p-3 text-sm font-bold text-bubblegum bg-navyBlue">
            <span>{caption}</span>
          </figcaption>
        )}
      </figure>
    ) : (
      <AlertError message="Error! Image URL is required." />
    )}
  </div>
);

export default ImageBlock;

CodePudding user response：

You can use the below approach to achieve this. Add a check that if the URL prop is not defined or it's length is 0 return the following JSX.


    if (!url || url.length == 0) {
        return (
            <AlertError message="Error! Image URL is required." />
        )
    }

Using this you'll be returning only <AlertError/> in JSX, if url is not defined.

Full code :

interface ImageProps {
    url: string;
    alt?: string;
    caption?: string;
    quality?: number;
}

const ImageBlock = ({ url, alt, caption, quality = 75 }: ImageProps) => {

    if (!url || url.length == 0) {
        return (
            <h3>Error! Image URL is required.</h3>
        )
    }

    return (
        <div className="max-w-5xl px-6 mx-auto mb-6">
            {url ? (
                <figure className="overflow-hidden rounded-md">
                    <Image
                        src={url}
                        width="1920"
                        height="1080"
                        layout="responsive"
                        quality={quality}
                        alt={alt}
                    />

                    {caption && (
                        <figcaption className="flex justify-between p-3 text-sm font-bold text-bubblegum bg-navyBlue">
                            <span>{caption}</span>
                        </figcaption>
                    )}
                </figure>
            ) : (
                <AlertError message="Error! Image URL is required." />
            )}
        </div>
    )
};

export default ImageBlock;