Reactにおけるリアクティブなデータ表示

オブジェクトの配列があり、それらが何かの名称と説明を含んでいるとします：

const initNotes = [
	{
		id: id(),
		name: 'name1',
		desc: 'long description 1'
	},
	{
		id: id(),
		name: 'name2',
		desc: 'long description 2'
	},
	{
		id: id(),
		name: 'name3',
		desc: 'long description 3'
	},
];

この配列の各要素を別々の段落で表示してみましょう：

function App() {
	const [notes, setNotes] = useState(initNotes);
	
	const result = notes.map(note => {
		return <p key={note.id}>
			{note.name}, 
			<i>{note.desc}</i>
		</p>;
	});
	
	return <div>
		{result}
	</div>;
}

では、説明が最初は非表示であり、各段落の末尾にその段落の説明を表示するボタンを追加するようにしましょう。そのためには、各製品オブジェクトに、説明の表示を制御するプロパティ showを追加します：

const initNotes = [
	{
		id: id(),
		name: 'name1',
		desc: 'long description 1',
		show: false,
	},
	{
		id: id(),
		name: 'name2',
		desc: 'long description 2',
		show: false,
	},
	{
		id: id(),
		name: 'name3',
		desc: 'long description 3',
		show: false,
	},
];

各段落の末尾にボタンを作成してください。クリックすると製品の完全な説明が表示されます。