---
description: '#HelloFrontend #HelloErmine #HelloWorld2021'
---

# Props

## Props คืออะไร ?

JSX attribute ที่เรากำหนดตอนเรียกใช้ component จะถูก React รวบรวมเป็น object แล้วส่งเป็น **props** ไปให้ component นั้น ๆ

```jsx
function Hello(props) {
    return <h1>Hello {props.name}</h1>;
}
 
const element = <Hello name="Poopoo" />; // <h1>Hello Poopoo</h1>
```

{% hint style="info" %}
function component จะรับ props เป็น argument 1 ตัว (นิยมใช้ชื่อ parameter เป็น props แต่สามารถใช้ชื่ออื่นได้)
{% endhint %}

## props.children

component ที่เราสร้างสามารถมี tag เปิดและปิดได้เหมือน HTML โดยทุกอย่างที่อยู่ข้างในจะถูกส่งมาใน `props.children` (รวมไปถึง JavaScript expression)

{% hint style="info" %}
props.children จะเป็นค่า array เมื่อมี children มากกว่า 1 ตัว
{% endhint %}

```jsx
function Hello(props) {
    return <h1>Hello {props.children}</h1>;
}
 
const element = <Hello>Doodoo</Hello>; // <h1>Hello Doodoo</h1>
```

## แหล่งอ้างอิง

{% embed url="https://reactjs.org/docs/components-and-props.html" %}
