Стейты и условный рендеринг в цикле в 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', desc: 'long description 2', comm: 'my super comment 2' }, { id: id(), name: 'prod3', desc: 'long description 3', comm: 'my super comment 3' }, ];

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