# Children
`components`配下に`PrimaryButton.tsx`を作成します。
以下リンクのボタンのcssを利用して、記述します。
{% embed url="" %}
{% code title="PrimaryButton.tsx◎" %}
```tsx
export const Button = () => {
return (
);
};
```
{% endcode %}
そして、primaryの部分を変えて何度も利用するため、前セクションで説明したようなpropsにて受け取るのもいいですが、`children`というpropsの受け取り方があります。`children`という変数名にてporpsを受け取るようにしましょう。
type Props = {
children: string;
};
export const PrimaryButton = ({ children }: Props) => {
return (
<button type="button" className="btn btn-primary">
{children}
</button>
);
};
上記を呼び出してみましょう。`children`を受け取る場合は、HTMLタグのように`button1`と開始タグ、終了タグを記述して、`button1`の部分が`children`で受け取る値になります。
import { Breadcrumb } from "./components/BreadCrumb";
import { PrimaryButton } from "./components/Button";
...
<div>
<Breadcrumb items={items1} />
<Breadcrumb items={items2} />
<UserDetail />
<PrimaryButton>button1</PrimaryButton>
<PrimaryButton>button2</PrimaryButton>
</div>
);
};
...
上記にて以下のように確認できるかと思います。
`children`は子要素を全て受け取ることができるので、HTMLタグも渡すことできます。
```tsx
button1
```
上記のようにタグを渡す場合は、PrimaryButtonの`children`の型を`ReactNode`という方にする必要があります。
```tsx
import { ReactNode } from "react";
type Props = {
children: ReactNode;
};
```