Реактивный показ данных в 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,
},
];
В конце каждого абзаца сделайте кнопку, по нажатию на которую будет показываться полное описание продукта.