# Реактивный показ данных в 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, }, ];`

В конце каждого абзаца сделайте кнопку, по нажатию на которую будет показываться полное описание продукта.

← →
↑