Nothing was returned from render. When using a ternery operator-CodePudding

I am trying to conditional render a part of a JSX element based on a conditional (whether linkShareLogs is truthy or not. I am using a ternery operator for this.

Currently I receive this error:

Uncaught Error: CodeLinkShareLogs(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

Here is how the JSX component is called:

  if (selected) {
    <CodeLinkShareLogPanel
      linkShareLogs={linkShareLogs}
      isBannerHidden={isBannerHidden}
      showSlackPrompt={showSlackPrompt}
      setShowSlackPrompt={setShowSlackPrompt}
    />;
  } else {
    return (
      <div
        className="flex flex-col"
        style={{ height: `calc(100vh - ${offset}px)`, overflow: "auto" }}
      >
        {showSlackPrompt && <CodeLinkSlackPrompt setShowSlackPrompt={setShowSlackPrompt} />}
      </div>
    );
  }

Here is the relevant component I am trying to render.

export function CodeLinkShareLogPanel({
  linkShareLogs,
  [...]
}: props) {
  return (
    <div>
      {showSlackPrompt && <CodeLinkSlackPrompt setShowSlackPrompt={setShowSlackPrompt} />}
      {linkShareLogs ? ( //begin ternery
        sortShareLogs(linkShareLogs).map((log: LinkShare, key) => (
          <div key={key} className="text-black">
           [...]
          </div>
        ))
      ) : ( 
        <div>
            This link hasn't been shared yet.
        </div>
      )}
    </div>
  );
}

CodePudding user response：

Try this way. In the first conditional you didnt return anything at all which is why u got that error

{
    selected ? (
        <CodeLinkShareLogPanel
            linkShareLogs={linkShareLogs}
            isBannerHidden={isBannerHidden}
            showSlackPrompt={showSlackPrompt}
            setShowSlackPrompt={setShowSlackPrompt}
        />
    ) : (
        <div
            className="flex flex-col"
            style={{ height: `calc(100vh - ${offset}px)`, overflow: "auto" }}
        >
            {showSlackPrompt && (
                <CodeLinkSlackPrompt setShowSlackPrompt={setShowSlackPrompt} />
            )}
        </div>
    )
}