# List Rendering

ကျတော်တို့ programmer တွေ developer တွေတိုင်းလိုလို DRY principle ကို ကြားဖူးကြမယ်လို့ထင်ပါတယ်

React application တစ်ခုမှာလည်းကျတော်တို့ က အဲလို DRY principle ကို လိုက်နာပြီးတော့ ရေးကြတဲ့အခါမှာ&#x20;

ကျတော်တို့က render တွေလုပ်ကြတယ်မလား

ဒီထဲမှာကျတော်တို့ react မှာအသုံးပြုတာများတဲ့ list render အကြောင်းကိုဆက်ပြီးတော့လေ့လာသွားကြ ရအောင်

အရင်ဆုံး ကျတော်တို့ code လေးတွေကို  ဒီလိုလေးရေးလိုက်ပါမယ်

```jsx
import React from 'react'

function ListRendering () {
    const list = [ "Bate" , "Thar" , "Kaung" , "Myat" , "Hun" ]
    return(
        <div>List Rendering</div>
    )
}
export default ListRendering
```

ကျတော်တို့က နောက်ပိုင်းကျရင် ဒေတာတွေ array တွေကို ဒေတာပြန်ယူပြီးတော့ render လုပ်တဲ့အခါမှာ&#x20;

ကျတော်တို့က ဒီဟာတွေကိုတခုချင်း လိုက်ပြီးတော့မရေးသွားပါဘူး အဲဒါကို ကျတော်တို့က&#x20;

ဘယ်လိုမျိုးရေးသွားမှာလည်းဆိုတော့

<pre class="language-jsx"><code class="lang-jsx">return(
<strong>    &#x3C;div>
</strong>        {
            list.map((item) => (
                &#x3C;h3>{item}&#x3C;/h3>
            )
        }
    &#x3C;/div>
)
</code></pre>

ဒီလိုလေးရေးလိုက်ပြီးရင်ကျ‌တော် တချက်ပြန်ရှင်းပြပေးပါမယ်

အဲဒါကဘာလည်းဆိုတော့ ကျတော်တို့က array data တခုကို render ချချင်တဲ့အခါမှာ array.map&#x20;

ကိုအသုံးပြုကြပါတယ်&#x20;

ဘာလို့ ဒီဟာကို ပဲ အသုံးပြုရတာလည်း တခြား ဟာတွေဖြစ်တဲ့ for တို့ for each တို့က&#x20;

သုံးလို့မရဘူးလားလို့မေးစရာရှိလာပါတယ်

သုံးလို့ကမရဘူးလားဆိုတော့ ရပါတယ် ဒါပေမယ့် map လိုမျိုး တိုက်ရိုက်ကြီးရေးလို့ရတော့မှာမဟုတ်ဘဲနဲ့&#x20;

သူ့ကို return ပြန်အောင်လုပ်ပေးပြီးတော့ အဲဒါကို ပြန်ပြီးတော့ render ချပေးရမှာပါ array.map မှာက&#x20;

ကျတော့သူက array ကို return လုပ်ပေးသွားတာဖြစ်တဲ့အတွက် ကျတော်တို့က ဒီဟာကို အသုံးပြုကြတာပါ

ကဲ ဆက်လိုက်ကြရအောင်

အခု အဲလိုလေးရေးလိုက်တဲ့အခါမှာ ကျတော်တို့ browser မှာပြန်သွားကြည့်တဲ့အခါမှာ result ကို&#x20;

ကျတော်တို့ မြင်ရပါလိမ့်မယ် ဒါပေမယ့်သူကို ကျတော်တို့ console မှာ သွားကြည့်တဲ့အခါမှာ&#x20;

warning ပြနေတာကိုမြင်ရလိမ့်မယ် အဲဒါက ဘာလည်းဆိုတော့ <br>

<figure><img src="https://lh6.googleusercontent.com/xYnN5EdGVDhfoXNRvnKjQxSUV3jp-SPryP-0NvWpt6h6Gw0fbl0mnGrc4GCvekbjnfGIaTX8QFtcnni_FrLU4h9aZK12HglzGpAGo-BCn99A8_1Qx0xD0BbphNOmcsZ1AUVAJ6VksnHGBku9ae28wGw" alt=""><figcaption></figcaption></figure>

ဘာလို့ အဲလိုပြောတာလည်းဆိုတော့ ကျတော်တို့ က react မှာ array data ကို list render လုပ်တဲ့အခါမှာ

ကျတော်တို့က သူနဲ့ သက်ဆိုင်တဲ့ node ကို unique ဖြစ်တဲ့ key props လေးတခု ကိုထည့်ပေးပါလို့ပြောပါတယ်

\
ဘာကြောင့် အဲလိုတောင်းတာလည်းဆိုတော့ သူက v-dom (virtual dom) ထဲမှာ သွားပြီးတော့ render&#x20;

သွားချပေးတဲ့အခါမှာ ကျတော်တို့ အခု list render လုပ်လိုက်တဲ့ node တွေက အကုန်လုံးတူနေနိုင်တဲ့အနေအထား&#x20;

တခုရှိနေလို့ပါ အဲအတွက် ကြောင့် သူက v-dom (virtual dom) မှာပြန်စစ်တဲ့အခါမှာ အလွယ်တကူ ဖြစ်အောင်လို့&#x20;

သူက အဲဒါကိုတောင်းတာပါ ပြီးတော့နောက်တချက်က အဲဒီ unique ဖြစ်တဲ့ key လေးကိုအသုံးပြုပြီးတော့&#x20;

react က ပြောင်းလဲမှုတွေကို တိုက်စစ်ပြီးတော့မှ browser ကို render ချပေးတာပါ&#x20;

ကျတော်တို့ ကုဒ်လေးတွေကိုနည်းနည်းပြင်လိုက်ရအောင်

```jsx
return(
    <div>
        {
            list.map((item , index) => (
                <h3 key={index}>{item}</h3>
            )
        }
    </div>
)
```

ဒီမှာ ကျတော်တို့က index ဆိုတာကို ယူထားတာတွေ့ရလိမ့်မယ်ဗျ အဲဒီ index ဆိုတာက ဘာလည်း ကို&#x20;

တွေးမိချင်တွေးမိလိမ့်မယ်

တကယ်က ကျတော်တို့က render လုပ်တဲ့ array ရဲ့ index တွေကို ယူပြီးတော့ထည့်ပေးလိုက်တာပါ&#x20;

ကျတော်တို့ array တခုမှာ index တွေက တခုနဲ့တခုက မတူဘူးလေ အဲအတွက်ကြောင့် သူ့ကို unique

ဖြစ်တဲ့အရာဆိုတော့ အဲဒါလေးကို ကျတော်တို့က အလွယ်လေးသုံးလိုက်တာပါ( တစ်ကယ်ဆိုရင် မသုံးသင့်ပါဘူးနော်)

အဲလောက်ဆိုရင်တော့ list render ကို နားလည်သွားမယ်လို့ထင်ပါတယ်
