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がリストから削除されるようにしてください。

3つの入力欄があります。各liの末尾にボタンを作成し、クリックするとそのliのオブジェクトデータが対応する入力欄に入力されるようにしてください。

前の課題を修正し、入力欄の横にボタンを配置してください。このボタンをクリックすると、入力欄のデータが対応するliに入力されるようにします。