💬

[React]map使い方

2023/07/13に公開

React

初心者

JSX

tech

map

JSX中括弧内にはfor文が書けません。
なのでmap()を使います。

map使い方

array資料型にmapを貼り付けることができます。

let arr = [1, 2, 3];
arr.map(function(a){
  console.log(a)
});

結果は1, 2, 3一つずつ出ます。
arrayの個数だけ回ります。

htmlに適用

ここに繰り返しコードがあります。

function App() {
  let [location, setLocation] = useState(['東京', '大阪', '青森']);


  return (
    <div className="App">
      <div>
        <h4>{location[0]} </h4>
      </div>
      <div>
        <h4>{location[1]} </h4>
      </div>
      <div>
        <h4>{location[2]} </h4>
      </div>
    </div>
  );
}

まず基本的な枠組みを先に決めてあげます。

      { 
        array.map(function(){
          return ( 内容 )
        }) 
      }

arrayにあるデータ数が多いほどリピート文が実行されるので、ここには従来使用していたlocationを入れると良いでしょう。

      { 
        location.map(function(a){
          return ( 
                  <div>
                    <h4>{a} </h4>
                  </div>
             )
        }) 
      }

aにはarrayの各値が入ります。
命名は皆さんの好きなようにしてもいいです。

もしfunctionにパラメータがもう一つ入るとしたら？

      { 
        location.map(function(a, i){
          return ( )
        }) 
      }

ここでiは何でしょうか？
これは0から始まり、arrayの数だけ増加します。

最後に私のコードに従っている場合は、コンソールウィンドウでこのようなメッセージを表示できます。

これはmapを使うとき書く要素はkeyが必要です。

      { 
        location.map(function(a, i){
          return ( 
                  <div key={i}>
                    <h4>{a} </h4>
                  </div>
             )
        }) 
      }

以上です。

map

Discussion