React（+TypeScript）入門 | Listを扱う

Reactでデータ集合に対してリスト表示する方法をまとめます。

List

データとしてarrayを考え、それをリスト表示します。
map()を用いてarrayの要素を<li>に射影する、が基本方針です。

import * as React from 'react';
 
const NameList = (props) => {
    const listItems = props.names.map(name => 
        <li>{name}</li>
    );
    return (
        <ul>{listItems}</ul>
    );
};
 
export default NameList;

import * as React from 'react';
import NameList from './components/NameList';
 
class App extends React.Component {
  render() {
    const names = ['Alice', 'Bob', 'Carol'];
    return (
      <div>
        <NameList names={names}/>
      </div>
    );
  }
}
 
export default App;

表示だけならばこれで動くには動くのですが、コンパイル時に警告が出るはずです。
実はこれでは不十分で次に述べるkeyというものが重要になります。

key

さっそくですが上のNameListコンポーネントを次のように直します。

const NameList = (props) => {
    const listItems = props.names.map((name, index) => 
        <li key={index}>{name}</li>
    );
    return (
        <ul>{listItems}</ul>
    );
};