Bug: Using boolean short circuit to conditionally render a component produces error when variable is undefined.

export default function App() {
  const item = undefined;
  const Item = () => item && <div>{item.name}</div>;

  return (
    <div>
      <Item />
    </div>
  );
}

In our case, item is initialized from array.find. It is a react-bootstrap NavDropdown.Item with others in a NavDropdown. It produces a white screen in our app rather than the on-screen errors seen in the example, but the javascript console shows the same errors. Changing to ternary item ? <div>{item.name}</div> : null works as a workaround.

React version: ^16.12.0

Link to code example: https://codesandbox.io/s/kind-voice-t2mdo

The current behavior

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

The expected behavior

skip rendering, no errors, as it does if item is null.

[Eddie-CooRo]

@illuminist I think it’s because forgetting to return something from a function in javascript, returns undefined by default. So React catches a lot of bugs early by not letting the undefined as the return type of the components, especially in complicated conditional renders. But null is always intentional.

[gaearon]

I should note there is also another problem in your original example:

export default function App() {
  const item = undefined;
  const Item = () => item && <div>{item.name}</div>;

  return (
    <div>
      <Item />
    </div>
  );
}

Here you are generating a different Item component on every render which causes it to lose any state in the subtree. Don’t do that.