Стейты и условный рендеринг в цикле в 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,
	},
];

Теперь сделаем показ описания в зависимости от значения свойства show:

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

Добавим теперь кнопку для показа описания:

<p key={note.id}>
	{note.name}
	<button onClick={() => showDesc(note.id)}>show</button>
	{desc}
</p>

Реализуем функцию showDesc:

function showDesc(id) {
	setNotes(notes.map(note => {
		if (note.id === id) {
			return {...note, show: !note.show};
		} else {
			return note;
		}
	}));
}

Соберем все вместе и получим решение задачи:

function App() {
	const [notes, setNotes] = useState(initNotes);
	
	function showDesc(id) {
		setNotes(notes.map(note => {
			if (note.id === id) {
				return {...note, show: !note.show};
			} else {
				return note;
			}
		}));
	}
	
	const result = notes.map(note => {
		let desc;
		if (note.show) {
			desc = <i>{note.desc}</i>;
		}
		
		return <p key={note.id}>
			{note.name}
			<button onClick={() => showDesc(note.id)}>show</button>
			{desc}
		</p>;
	});
	
	return <div>
		{result}
	</div>;
}

Дан массив с продуктами, их названиями, ценами, описаниями и комментариями:

const initProds = [
	{
		id: id(),
		name: 'prod1',
		cost: 'cost1',
		desc: 'long description 1',
		comm: 'my super comment 1'
	},
	{
		id: id(),
		name: 'prod2',
		cost: 'cost2',
		desc: 'long description 2',
		comm: 'my super comment 2'
	},
	{
		id: id(),
		name: 'prod3',
		cost: 'cost3',
		desc: 'long description 3',
		comm: 'my super comment 3'
	},
];

Выведите этот массив в виде списка ul. Сделайте так, чтобы описание и отзыв изначально были не показаны, а для их показа было две кнопки в конце каждой li.