React တွင် အချက်အလက်များကို တုံ့ပြန်ပြသခြင်း

ကျွန်ုပ်တို့တွင် အရာဝတ္ထုများ၏ အမည်များနှင့် ဖော်ပြချက်များ ပါဝင်သည့် အရာဝတ္ထုခင်းကျင်းတစ်ခု ရှိသည်ဆိုပါစို့:

const initNotes = [
	{
		id: id(),
		name: 'name1',
		desc: 'long description 1'
	},
	{
		id: id(),
		name: 'name2',
		desc: 'long description 2'
	},
	{
		id: id(),
		name: 'name3',
		desc: 'long description 3'
	},
];

ဤခင်းကျင်း၏ အမှတ်စဉ်တစ်ခုစီကို သီးခြားစာပိုဒ်တစ်ခုစီတွင် ထုတ်ပြရန် လုပ်ဆောင်ပါမည်:

function App() {
	const [notes, setNotes] = useState(initNotes);
	
	const result = notes.map(note => {
		return <p key={note.id}>
			{note.name}, 
			<i>{note.desc}</i>
		</p>;
	});
	
	return <div>
		{result}
	</div>;
}

ယခု ဖော်ပြချက်များကို ကနဦးတွင် ဝှက်ထားပြီး စာပိုဒ်တစ်ခုစီ၏ အဆုံးတွင် ထိုစာပိုဒ်မှ ဖော်ပြချက်ကို ပြသရန် ခလုတ်များ ထည့်ရန် လုပ်ဆောင်ပါမည်။ ဤသို့ပြုလုပ်ရန် ထုတ်ကုန်တစ်ခုစီရှိ အရာဝတ္ထုတွင် ဖော်ပြချက်ပြသမှုကို ထိန်းညှိသည့် show ဂုဏ်သတ္တိတစ်ခု ထည့်ပါမည်:

const initNotes = [
	{
		id: id(),
		name: 'name1',
		desc: 'long description 1',
		show: false,
	},
	{
		id: id(),
		name: 'name2',
		desc: 'long description 2',
		show: false,
	},
	{
		id: id(),
		name: 'name3',
		desc: 'long description 3',
		show: false,
	},
];

စာပိုဒ်တစ်ခုစီ၏ အဆုံးတွင် ခလုတ်တစ်ခု ပြုလုပ်ပါ။ �ိုခလုတ်ကို နှိပ်လိုက်သည့်အခါ ထုတ်ကုန်၏ ပြည့်စုံသော ဖော်ပြချက်ကို ပြသရပါမည်။