TypeScript+Reactでpropsを使ってコンポーネントにデータを渡す流れ

Reactでコンポーネントにデータを渡す流れのメモ。
ソースはこちら

サンプル概要

• 書籍の一覧を表示する
• 表示するのは、書籍名と著者名
• 書籍のデータは決め打ちとする

コンポーネント概要

• App.tsx
• Book.tsx・・・書籍情報（書籍名と著者名）を表すコンポーネント
• BookList.tsx・・・Bookコンポーネントを一覧で表示するコンポーネント

propsを使ってコンポーネントにデータを渡す

• コンポーネントにデータを渡すためのpropsに使う型（Book.tsx）を定義する

Book.tsx

export type Book = {
    id: number;
    name: string;
    author: string;
}

• BookListコンポーネントのpropsの型として、上記で作成した型を指定する

BookList.tsx

import React, { FC } from 'react';
import { Book } from './Book';
import { Item } from 'semantic-ui-react';

type bookProps = {
    books: Book[];
}

const BookList: FC<bookProps> = (bookProps) => {
    const { books } = bookProps;

    return (
        <Item.Group>
            {books.map((book) => (
                <Item key={book.id}>
                    <Item.Content>
                        <Item.Header>{book.name}</Item.Header>
                        <Item.Meta>{book.author}</Item.Meta>
                    </Item.Content>
                </Item>
            ))}
        </Item.Group>
    );
};

export default BookList;

• Appコンポーネントにて書籍情報をBookListコンポーネントに渡す

App.tsx

import React, { FC } from 'react';
import { Book } from './Book';
import BookList from './BookList';
import './App.css';

const App: FC = () => {
  const books: Book[] = [
    {
      id: 1,
      name: '独学大全',
      author: '読書猿'
    },
    {
      id: 2,
      name: '数学ガールの秘密ノート／場合の数',
      author: '結城浩'
    },
    {
      id: 3,
      name: 'アジャイルサムライーー達人開発者への道',
      author: 'Jonathan Ramusson, 西村直人'
    }
  ];

  return (
    <div className="container">
      <header>
        <h1>書籍一覧</h1>
      </header>
      <BookList books={books} />
    </div>
  );
}

export default App;