React Nativeのreturnにmapで取得した変数を入れても出力されずハマる

react-native

2022.03.18 2022.02.07

React Nativeで<View>を出力するにはreturnで実装しますが、そのreturnの中に変数を使うこともできますね。たとえば

export default function App() {
・
・
・
  return (
    <View style={styles.container}>
      {SomethingItems}
    </View>
  );
}

のように記述して、別途宣言した変数SomethingItemsを呼び出せます。

先日この形態でmap関数を利用してマッピングした変数を出力しようとしたのですが、全く画面に出てこない・・・
なんやかんややってたぶん1時間はハマってたと思います。

どんなコードを書いたかというと、こんな風に書きました。

export default function App() {
・
・
・
  const SomethingItems= shops.map((shop, index) => {
    <View key={index.toString()}>
      <Text>{shop.name}</Text>
    </View>
  });

  return (
    <View style={styles.container}>
      {SomethingItems}
    </View>
  );
}

実力のある皆さんならすぐ分かるかと思いますが、これだと画面に出力されません。
Visual Studio Codeでは、上記のように書いてもシンタックスエラーにはならないのでドハマりしてしまいました・・・
どこがいけないかお分かりでしょうか？ちなみにshopsは宣言済みで、かつ{shop.name}も間違いではありません。

正解のコードは

export default function App() {
・
・
・
  const SomethingItems= shops.map((shop, index) => (
    <View key={index.toString()}>
      <Text>{shop.name}</Text>
    </View>
  ));

  return (
    <View style={styles.container}>
      {SomethingItems}
    </View>
  );
}

もう二度とミスることはないでしょう。こんなことで1時間かかったとは・・・

念のためにまだよくわからない方に説明すると「{}」中かっこ、ブレースがおかしかったのです。「()」かっこ、小かっこ、パーレンで書かないといけないのに。map関数の使い方がバグって（自分が）ました。

const SomethingItems= shops.map((shop, index) => ( // ←「{」ではなく「{」だよ
  )); // ← 「}」じゃなくて「)」です

皆さんもカッコの使い方にはご注意を・・・

まとめ

React Nativeのコールバックメソッドの書き方は、

anything.map((shop, index) => ()); // ← 「{}」ではなく「()」に注意！

です。「{}」とうっかり書いていないか注意して見直しましょう。