React හි වස්තූන්ගේ අරා වලට ප්‍රතික්‍රියාශීලී මෙහෙයුම්

දැන් අපි වස්තූන්ගේ අරා වලට ප්‍රතික්‍රියාශීලී මෙහෙයුම් කරන්න ඉගෙන ගනිමු. මෙම සිද්ධියේ දී, අපි කිසියම් දෙයක් කිරීමට හදනු ලබන අරයෙහි මූලද්‍රව්‍යයේ id ශ්‍රිතයට සම්ප්‍රේෂණය කළ යුතුය:

function App() {
	const [notes, setNotes] = useState(initNotes);
	
	const result = notes.map(note => {
		return <li key={note.id}>
			<span>{note.prop1}</span>
			<span>{note.prop2}</span>
			<span>{note.prop3}</span>
			
			<button onClick={() => doSmth(note.id)}>
				btn
			</button>
		</li>;
	});
	
	return <div>
		<ul>
			{result}
		</ul>
	</div>;
}

මූලද්‍රව්‍යයක් සමඟ කිසියම් දෙයක් කිරීම සඳහා, පළමුව අපි එය සොයා ගත යුතු අතර, එය සඳහා සම්පූර්ණ අරය ලූපයකින් ගමන් කළ යුතුය:

function App() {
	...
	
	function doSmth(id) {
		setNotes(notes.map(note => {
			if (note.id === id) {
				// මූලද්‍රව්‍යය සමඟ කිසියම් දෙයක් කරන්න
			}
			
			return note;
		}));
	}
}

උදාහරණයක් ලෙස, සොයාගත් වස්තුවේ ලියවිලි වෙනස් කරමු:

function App() {
	...
	
	function doSmth(id) {
		setNotes(notes.map(note => {
			if (note.id === id) {
				note.prop1 += '!';
				note.prop2 += '!';
				note.prop2 += '!';
				
				return note;
			}
			
			return note;
		}));
	}
}

එක් එක් li හි අවසානයේ බොත්තමක් සාදන්න, එය ක්ලික් කළ විට එම li ලැයිස්තුවෙන් ඉවත් වේ.

ආදාන ක්ෂේත්‍ර තුනක් ලබා දී ඇත. එක් එක් li හි අවසානයේ බොත්තමක් සාදන්න, එය ක්ලික් කළ විට එම li හි වස්තුවේ දත්ත අදාල ආදාන ක්ෂේත්‍රවලට පැමිණේ.

පෙර කාර්යය වෙනස් කරන්න එවිට ආදාන ක්ෂේත්‍ර අසල බොත්තමක් ඇත, එය ක්ලික් කළ විට ආදාන ක්ෂේත්‍රවල දත්ත අදාල li ට පැමිණේ.