example-react-null-undefined.tsx

/**
 *  Check to render null/undefined/component.
 *
 *  Conclusion: `{makeComponent(...)}` is better than `<MakeComponent ... />` because of `undefined` case.
 */
const Component = () => {
  const makeNull = () => null;
  const makeUndefined = () => undefined;
  const makeComponent = (props: { item: string }) => (
    <div>makeComponent: {props.item}</div>
  );
  const ImplNull = () => null;
  const ImplUndefined = () => undefined;
  const ImplComponent = (props: { item: string }) => (
    <div>ImplComponent: {props.item}</div>
  );

  return (
    <div className="App">
      {makeNull()}                    // ok: no render
      {makeUndefined()}               // ok: no render
      {makeComponent({ item: "ok" })} // ok: render
      <ImplNull />                    // ok: no nreder
      <ImplUndefined />.              // ng: ts error 'ImplUndefined' cannot be used as a JSX component. Its return type 'undefined' is not a valid JSX element.ts
      <ImplComponent item="ok" />.    // ok: render
    </div>
  )
}