Reactive Array Operations in React

Let's now learn how to do reactive manipulations with array elements. To do this, we will attach an event handler to each li, in which we will pass the number of this li in the array as a parameter:

function App() {
	const [notes, setNotes] = useState([1, 2, 3, 4, 5]);
	
	const result = notes.map((note, index) => {
		return <li key={index} onClick={() => doSmth(index)}>
			{note}
		</li>;
	});
	
	return <div>
		<ul>
			{result}
		</ul>
	</div>;
}

Inside our function we can perform any operation on our array element:

function App() {
	...
	
	function doSmth(index) {
		let copy = Object.assign([], notes);
		copy[index] += '!'; // let's do something with the element setNotes(copy);
	}
}

Given an array of numbers. Print it as a list ul. Click on any li to square its number.

At the end of each li make a button that, when clicked, will remove this li from the list.

Given an input. By clicking on any li, make the text of this li go into the input.

Modify the previous task so that when the input focus is lost, the modified text goes to the corresponding li.

A button is given. By clicking on this button, the order of li is reversed.