Reactのchildrenを使ってコンポーネントにコンポーネントを渡す

# ■はじめに

`props.children`を使って、コンポーネントを別のコンポーネントに渡す方法を知ったので、備忘録を残します。

# ■props.childrenとは何か？

```jsx
import './App.css';
import { Container } from './components/Container';
import { UserProfile } from './components/UserProfile';

function App() {
	return (
		<Container>
			{100}
		</Container>
	);
}

export default App;
```

`<Container> ~ </Container>`の開始タグと終了タグがあります。

このように書いた場合、`<Container> ~ </Container>`の中に書かれた値が、props.childrenプロパティに渡ってきます。

```jsx
export const Container = ({ children }) => {
    return (
        <div className="container">
            <h1>Containerコンポーネント</h1>
            {children}
        </div>
    )
}
```

![スクリーンショット 2025-03-02 11.02.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307408/58878770-c4ae-4d60-b781-b3eedb45e76a.png)

この書き方の何が便利かと言いますと、コンポーネントを別のコンポーネントに渡したいときに便利です。

# ■props.childrenを使ってコンポーネントにコンポーネントを渡してみる

```jsx
import './App.css';
import { Container } from './components/Container';
import { UserProfile } from './components/UserProfile';

function App() {
	const userProfileObj = [
		{ name: '田中', age: 25, email: 'sample01@example.com' },
		{ name: '佐藤', age: 30, email: 'sample02@example.com' },
	];

	return (
		<Container>
			<UserProfile {...userProfileObj[0]} />
			<UserProfile {...userProfileObj[1]} />
		</Container>
	);
}

export default App;

```

```jsx
export const UserProfile = ({ name, age, email }) => {
	return (
		<div className="user-profile">
			<h2>User Profileコンポーネント</h2>
			<p>Name: {name}</p>
			<p>Age: {age}</p>
			<p>Email: {email}</p>
		</div>
	);
};

```

```jsx
export const Container = ({ children }) => {
    return (
        <div className="container">
            <h1>Containerコンポーネント</h1>
            {children}
        </div>
    )
}

```

UserProfileコンポーネントがpropsで受け取った情報を使って、プロフィールのElementを作るコンポーネントです。

`<Container>〜</Container>`でUserProfileコンポーネントをContainerの`props.childres`に渡しています。!

![スクリーンショット 2025-03-02 11.07.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307408/aa58251e-9222-4e78-ad34-aa6dc9f0c224.png)

childrenには、UserProfileコンポーネントの JSオブジェクトが、配列でわたってきます。

それを`{children}`でレンダリングしています。

# ■`<Container>〜</Container>`の終了タグ無しで、`props.childres`にコンポーネントを渡す

```jsx
import './App.css';
import { Container } from './components/Container';
import { UserProfile } from './components/UserProfile';

function App() {
	const userProfileObj = [
		{ name: '田中', age: 25, email: 'sample01@example.com' },
		{ name: '佐藤', age: 30, email: 'sample02@example.com' },
	];

	return (
		<Container
			children={[<UserProfile {...userProfileObj[0]} />, <UserProfile {...userProfileObj[1]} />]}
			user1={<UserProfile {...userProfileObj[0]} />}
			user2={<UserProfile {...userProfileObj[1]} />}
		/>
	);
}

export default App;

```

```jsx
export const UserProfile = ({ name, age, email }) => {
	return (
		<div className="user-profile">
			<h2>User Profileコンポーネント</h2>
			<p>Name: {name}</p>
			<p>Age: {age}</p>
			<p>Email: {email}</p>
		</div>
	);
};

```

```jsx
export const Container = ({ children, user1, user2 }) => {
	console.log(children);
	return (
		<div className="container">
			<h1>Containerコンポーネント</h1>
			{children}
			<div>{user1}</div>
			<div>{user2}</div>
		</div>
	);
};

```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307408/bd87c073-ebfd-4bb8-b0c4-4b18b34c4d8c.png)


`<Container>〜</Container>`の終了タグ無しで、`props.childres`にコンポーネントを渡す場合は、`children={[<UserProfile {...userProfileObj[0]} />, <UserProfile {...userProfileObj[1]} />]}`のように書きます。

childrenというプロパティで、`UserProfile`コンポーネントを配列で渡しています。

受け取り側のContainerコンポーネントでは、`props.childres`を分割代入で取得しています。

また、`user1={<UserProfile {...userProfileObj[0]} />}`というように、`UserProfile`コンポーネントを個別に渡すこともできます。

個別に渡すことで、`Container`コンポーネント内で`UserProfile`コンポーネントの表示位置を柔軟に変える事ができます。