Стейты и условный рендеринг React

В реальных проектах часто возникает необходимость показывать элементы страницы при клике на кнопку. К примеру, для отображения раздела, спрятанного под закладкой (табом). Давайте рассмотрим код подобной кнгопки, которая может скрывать и отображать элементы на странице.

Пример сделаем с использованием стейтов. Поместим на страницу только кнопку и блок, который нужно скрывать по нажатию на неё. Повторный клик будет опять показывать блок. А чтобы пользователь понял, что произошло, добавим на кнопку надписи "Показать" и "Скрыть":

import React, { useState } from 'react';

function App() {
   const [show, setShow] = useState(false);
 
   let text;
   if (show) {
      text = <p>Тише, мыши, кот на крыше</p>;
   }

   return <div>
      <button onClick={() => setShow(!show)}>
         {show ? 'Скрыть' : 'Показать'}
      </button>

      <br /> 

      {text}
   </div>;
}

export default App;

Подобная функция часто встречается на реальных проектах ещё и в сочетании с выводом свойств объектов из целого массива. Давайте попробуем доработать предыдущий пример, чтобы показывать/скрывать строки стиха при клике на кнопки. Стихотворение будет содержать три строки. Каждая строка будет выводиться на экран, а в конце у неё будет кнопка "Скрыть/Показать". При нажатии на неё будет происходить скрытие или отобрежение соответствующей строки.

Чтобы реализовать такую логику придётся добавить всем объектам свойство "show", которое будет определять показывается или скрывается в текущий момент строка стихотвоврения.

const mouseText = [
   {
      id: 1,
      text: 'Тише, мыши, кот на крыше',
      show: true
   },
   {
      id: 2,
      prop1: 'А котята ещё выше',
      show: true
   },
   {
      id: 3,
      text: 'Кот пошёл за молоком',
      show: true
   },
   {
      id: 4,
      prop1: 'А котята кувырком',
      show: true
   }
];

import React, { useState } from 'react';

function App() {
   const [objArr, setValue] = useState(mouseText);
 
   function show(idToShow) { // скрыть или показать строку
      setValue(objArr.map(obj => {
         if (obj.id == idToShow) {
            return {...obj, show: !obj.show};
         } else {
            return obj;
         }
      }));
   }

   const result = objArr.map((obj) => {
      let text;
      if (obj.show) {
         text = <span>{obj.text}</span>;
      }
      return <div key={obj.id}>
         {text}

         <button onClick={() => setValue(obj.id)}>
            {obj.show ? 'Скрыть' : 'Показать'}
         </button>
      </div>;
   });

   return <div>
      {result}
   </div>;
}

export default App;