【React】オブジェクトリストをループしてコンポーネント化する

はじめに

プログラミング歴2ヶ月の素人が書いています。（間違っていたらご指摘ください）

WesBos.com のオンラインビデオコースでReactを学習しています。
動画は以下から。
https://reactforbeginners.com/

「Reactでオブジェクトリストをループしてコンポーネントを動的に複数生成する」ための学習メモです。

今回の目的

以下のような商品リストがオブジェクトリストとして存在するとします。

fishList.js

const fishes = {
  fish1: {
    name: "Pacific Halibut",
    image: "/images/hali.jpg",
    price: 1724,
  },

  fish2: {
    name: "Lobster",
    image: "/images/lobster.jpg",
    price: 3200,
  },

  fish3: {
    name: "Sea Scallops",
    image: "/images/scallops.jpg",
    price: 1684,
  },

export default fishes;

このようなオブジェクトリストをもとに、

• コンポーネントを動的に変化させながら自動生成。

• リストが増えたり減ったりしても、自動的に変化するようにします。

実装の概要

• オブジェクトリストはそのままではループできないので、Object.keys()でキー配列化する

• map()しながら、<Fish />というコンポーネントをキー配列の要素分つくる

• <Fish />コンポーネント内でオブジェクトの情報が使えるようpropsとして渡す

リストのインポート

App.js

import React, { useState } from 'react';
import fishes from '../fishList'; //Fishのオブジェクトリスト
import Fish from './Fish'; //Fishコンポーネント（これから作る）

const App = () => {
  return (
    /*ここに <Fish /> のリストを作りたい*/
  )
};
export default App;

オブジェクトリストからキーの配列をつくる

App.js

const App = () => {
  return (
     {Object.keys(fishes)} // [fish1, fish2, fish3]
  )
};

キーの配列をmap()してコンポーネントを作る

ついでに個々のコンポーネントにユニークなkeypropsをつけることができます。

App.js

const App = () => {
  return (
    {Object.keys(fishes).map(key => <Fish key={key} />)} 
    // <Fish key="fish1"/>
    // <Fish key="fish2"/>
    // <Fish key="fish3"/>
  )
};

オブジェクトの情報にアクセスできるようPropsを渡す

App.js

const App = () => {
  return (
    {Object.keys(fishes).map(key => <Fish key={key} details={fishes[key]} />)} 
    // <Fish key="fish1" details={name: "Pacific Halibut", image: ...} />
    // <Fish key="fish2" details={name: "Lobster", image: ...} />
    // <Fish key="fish3" details={name: "Sea Scallops", image: ...} />
  )
};

Fishコンポーネントで情報を受け取る

プロパティから情報を受け取って、使用することができます。

Fish.js

import React from 'react';

const Fish = (props) => {
  return (
    <li>
      <img src={props.details.image}/>
      <h3>{props.details.name}</h3>
      <p>{props.details.price}</p>
    </li>
  )
};

export default Fish;

分割代入を使ったリファクタリング

props.detailsはそれぞれのfishのオブジェクトリストになっているので、分割代入することでよりコードが簡潔になります。
（なお、変数の並び順はプロパティの定義順と違っていても、分解しないプロパティがあってもokで、対応するプロパティがない場合は無視されます。）

参考： 『《JavaScript》ES6の分割代入のはじめかた。』
https://qiita.com/uto-usui/items/a9d17447fe81c17c41fa

Fish.js

import React from 'react';

const [name, image, price] = props.details; //分割代入

const Fish = (props) => {
  return (
    <li>
      <img src={image}/>
      <h3>{name}</h3>
      <p>{price}</p>
    </li>
  )
};

export default Fish;

まとめ

• オブジェクトリストをコンポーネント化することができる

• キー配列化して、map()でループする

• propsに情報を渡して、個々のコンポーネントからアクセスできる

• 分割代入すると、コードが簡潔になる