අරාවකින් React හි select value ගුණාංග

අපගේ ලැයිස්තු අයිතම නැවතත් ගබඩා කර ඇතැයි සිතමු අරාවක:

function App() {
	const texts = ['text1', 'text2', 'text3', 'text4'];
	const [value, setValue] = useState('');
	
	...
}

මෙම අරාව භාවිතා කර අපි එය සාදන්නෙමු option ටැග්, ඒවාට ගුණාංග ලෙස එකතු කිරීම value අරාව මූලද්‍රව්‍යවල අගයන්:

function App() {
	const texts = ['text1', 'text2', 'text3', 'text4'];
	const [value, setValue] = useState('');
	
	const options = texts.map((text, index) => {
		return <option key={index} value={index}>{text}</option>;
	});
	
	...
}

සාදන ලද ටැග් භාවිතා කර අපි ඩ්‍රොප්ඩවුන් එකක් සාදන්නෙමු ලැයිස්තුව:

return <div>
	<select value={value} onChange={event => setValue(event.target.value)}>
		{options}
	</select>
</div>;

තේරූ අයිතමයේ අංකය ඡේදයකට ප්‍රතිදානය කරමු:

return <div>
	<select value={value} onChange={event => setValue(event.target.value)}>
		{options}
	</select>
	<p>
		ඔබේ තේරීම: {value}
	</p>
</div>;

දැන් අපි තෝරාගත් අයිතමයේ පෙළ ප්‍රතිදානය කරමු, එහි අංකය සහ පෙළ සහිත අරාව භාවිතා කිරීම:

return <div>
	<select value={value} onChange={event => setValue(event.target.value)}>
		{options}
	</select>
	<p>
		ඔබේ තේරීම: {texts[value]}
	</p>
</div>;

අපි සියල්ල එකට එකතු කර පහත කේතය ලබා ගනිමු:

function App() {
	const texts = ['text1', 'text2', 'text3', 'text4'];
	const [value, setValue] = useState('');
	
	const options = texts.map((text, index) => {
		return <option key={index} value={index}>{text}</option>;
	});
	
	return <div>
		<select value={value} onChange={event => setValue(event.target.value)}>
			{options}
		</select>
		<p>
			ඔබේ තේරීම: {texts[value]}
		</p>
	</div>;
}