React में इनपुट को ऐरे से बांधना

मान लीजिए कि state में notes ऐरे stored है:

function App() {
	const [notes, setNotes] = useState([1, 2, 3]);
	
	return <div>
		
	</div>;
}

मान लीजिए कि हमारे पास एक सहायक function भी है, जो ऐरे के elements का sum निकालती है:

function getSum(arr) {
	let sum = 0;
	
	for (const elem of arr) {
		sum += +elem;
	}
	
	return sum;
}

function App() {
	...
}

आइए हमारे state ऐरे के elements का sum निकालें और दिखाएं, इसके लिए हमारी सहायक function का use करके:

function App() {
	const [notes, setNotes] = useState([1, 2, 3]);
	
	return <div>
		{getSum(notes)}
	</div>;
}

आइए अब तीन inputs बनाएं और value हर एक input में ऐरे का एक element डालें:

function App() {
	const [notes, setNotes] = useState([1, 2, 3]);
	
	return <div>
		<input value={notes[0]} />
		<input value={notes[1]} />
		<input value={notes[2]} />
		
		{getSum(notes)}
	</div>;
}

आइए अब हमारे inputs पर onChange event add करें। इसके साथ ही एक common function-handler बनाएं इस event का:

function App() {
	const [notes, setNotes] = useState([1, 2, 3]);
	
	function changeHandler(index, event) {
		// common function-handler
	}
	
	return <div>
		<input value={notes[0]} onChange={event => changeHandler(0, event)} />
		<input value={notes[1]} onChange={event => changeHandler(1, event)} />
		<input value={notes[2]} onChange={event => changeHandler(2, event)} />
		
		{getSum(notes)}
	</div>;
}

जैसा कि आप देख रहे हैं, function changeHandler पहले parameter के रूप में उस array element का number लेती है, जिसे यह input edit कर रहा है।

इस number के द्वारा हम array के element को input की content से replace कर सकते हैं।

आइए इसे करें:

function changeHandler(index, event) {
	setNotes([...notes.slice(0, index), event.target.value, ...notes.slice(index + 1)]);
}

अब किसी भी input को edit किया जा सकता है, इससे reactively array change होगा और, इसी के अनुसार, इसके elements का sum recalculate होगा।

आइए हमारा सारा code एक साथ लाते हैं:

function App() {
	const [notes, setNotes] = useState([1, 2, 3]);
	
	function changeHandler(index, event) {
		setNotes([...notes.slice(0, index), event.target.value, ...notes.slice(index + 1)]);
	}
	
	return <div>
		<input value={notes[0]} onChange={event => changeHandler(0, event)} />
		<input value={notes[1]} onChange={event => changeHandler(1, event)} />
		<input value={notes[2]} onChange={event => changeHandler(2, event)} />
		
		{getSum(notes)}
	</div>;
}

ऐसा किया जा सकता है कि inputs loop में form हों:

function App() {
	const [notes, setNotes] = useState([1, 2, 3]);
	
	function changeHandler(index, event) {
		setNotes([...notes.slice(0, index), event.target.value, ...notes.slice(index + 1)]);
	}
	
	const result = notes.map((note, index) => {
		return <input
			key={index}
			value={note}
			onChange={event => changeHandler(index, event)}
		/>;
	});
	
	return <div>
		{result}
		{getSum(notes)}
	</div>;
}

निम्नलिखित array दी गई है:

[1, 2, 3, 4, 5, 6, 7, 8, 9]

इस array के elements का arithmetic mean screen पर show करें। Loop में elements को edit करने के लिए inputs बनाएं।