APIやデータベースから取ってきた配列を1個ずつ見るときにmap関数を使用しています。
その際にいつも同じエラーを出してしまっていることに気付いたので忘れないようにアウトプットすることにしました。

map関数の中で親要素は1個でないといけない

記事を書くにあたって確認用に自分で書いたコードだとかなり分かりやすいエラーが出ました。
いつもはmap is not functionみたいなエラーで画面真っ白だった気がするのですがなぜなのでしょうか。

動く

///
  return (
    <>
      {data.map((user, index) => (
        <div key={index}>
          <div>{user.first}</div>
          <div>{user.last}</div>
          <div>{user.born}</div>
        </div>
      ))}
    </>
  );
///

動かない

///
  return (
    <>
      {data.map((user) => (
        <div>{user.first}</div>
        <div>{user.last}</div>
        <div>{user.born}</div>
      ))}
    </>
  );
///

mapの=>の後はJSXの中では()、外では{}？

今日いくつかのチュートリアル動画を見てタイトルの通りだと思っていました。
ですが記事を書くにあたって自分でコードを書いてみるとなぜかどちらでも動きました。
使い分けが全く分からないのでまだまだ勉強が足りないのだなと感じます。
調べても思うような答えがヒットしないのでもし読んでいるあなたが知っていることがあれば教えてください。

=>の後が{}

///
  return (
    <>
      {data.map((user, index) => {
        <div key={index}>
          <div>{user.first}</div>
          <div>{user.last}</div>
          <div>{user.born}</div>
        </div>;
      })}
    </>
  );
///

=>の後が()

///
  return (
    <>
      {data.map((user, index) => (
        <div key={index}>
          <div>{user.first}</div>
          <div>{user.last}</div>
          <div>{user.born}</div>
        </div>;
      ))}
    </>
  );
///