ユーザーリストコンポーネントの作成と使用方法

1. ユーザーリストコンポーネントの作成: 最初に、Reactを使用してユーザーリストコンポーネントを作成します。以下は、基本的なコンポーネントの作成方法です。

import React from 'react';
const UserListComponent = ({ users }) => {
  return (
    <div>
      <h1>ユーザーリスト</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};
export default UserListComponent;

上記のコードでは、usersというプロパティを受け取り、ユーザーのリストを表示するコンポーネントを作成しています。

2. ユーザーリストコンポーネントの使用: 作成したユーザーリストコンポーネントを他のコンポーネントで使用する方法を示します。

まず、ユーザーリストを表示したい親コンポーネントで、ユーザーデータのリストを用意します。

import React from 'react';
import UserListComponent from './UserListComponent';
const App = () => {
  const users = [
    { id: 1, name: 'ユーザー1' },
    { id: 2, name: 'ユーザー2' },
    { id: 3, name: 'ユーザー3' },
  ];
  return (
    <div>
      <h1>アプリケーション</h1>
      <UserListComponent users={users} />
    </div>
  );
};
export default App;

上記のコードでは、usersという変数にユーザーデータのリストを格納し、UserListComponentコンポーネントを使用して表示しています。

これで、ユーザーリストコンポーネントを作成し、他のコンポーネントで使用する方法が分かりました。必要に応じて、スタイリングや追加の機能を実装することもできます。