Confused with Fat Arrow (=>) function

Question

Hi I was learning NextJs and find this problem

This Module Works

const GlobalStyles = () => (
  <>
    <Global
      styles={css`
        body {
          color: #000000;
        }
      `}
    />
  </>
);
export default GlobalStyles;

This not

const GlobalStyles = () => {
  <>
    <Global
      styles={css`
        body {
          color: #000000;
        }
      `}
    />
  </>
};
export default GlobalStyles;

am really noob can anyone explain?

Answer 1

The answer to this is very simple.

const GlobalStyles = () => (
  <>
    <Global
      styles={css`
        body {
          color: #000000;
        }
      `}
    />
  </>
);

This is equivalent to

const GlobalStyles = () => {
  return (
    <>
      <Global
        styles={css`
          body {
            color: #000000;
          }
        `}
      />
    </>
  );
}

Your second code block does not return anything, so it's the right behavior to render nothing.