Чтобы создать кнопку «Скрыть и показать» в React.js, вы можете использовать различные методы. Вот несколько подходов, которые вы можете рассмотреть:

1. Подход на основе состояний:

   • Определите переменную состояния, например isHidden, в состоянии вашего компонента.
   • Используйте условный рендеринг для отображения или скрытия контента в зависимости от состояния isHidden.
   • Прикрепите к кнопке обработчик событий, который переключает значение isHiddenпри нажатии.

   import React, { useState } from 'react';
   function HideShowButton() {
    const [isHidden, setIsHidden] = useState(true);
    const toggleContent = () => {
      setIsHidden(!isHidden);
    };
    return (
      <div>
        <button onClick={toggleContent}>
          {isHidden ? 'Show' : 'Hide'}
        </button>
        {!isHidden && <div>Content to be shown or hidden</div>}
      </div>
    );
   }

2. Подход на основе классов:

   • Определите свойство состояния, например isHidden, в состоянии вашего компонента.
   • Используйте условный рендеринг для отображения или скрытия контента в зависимости от состояния isHidden.
   • Прикрепите к кнопке обработчик событий, который переключает значение isHiddenпри нажатии.

   import React, { Component } from 'react';
   class HideShowButton extends Component {
    constructor(props) {
      super(props);
      this.state = {
        isHidden: true,
      };
    }
    toggleContent = () => {
      this.setState((prevState) => ({
        isHidden: !prevState.isHidden,
      }));
    };
    render() {
      return (
        <div>
          <button onClick={this.toggleContent}>
            {this.state.isHidden ? 'Show' : 'Hide'}
          </button>
          {!this.state.isHidden && <div>Content to be shown or hidden</div>}
        </div>
      );
    }
   }

3. Используйте подход CSS:

   • Определите класс CSS для скрытия контента.
   • Прикрепите к кнопке обработчик событий, который добавляет или удаляет класс CSS из элемента контента при нажатии.

   import React, { useState } from 'react';
   import './HideShowButton.css';
   function HideShowButton() {
    const [isHidden, setIsHidden] = useState(true);
    const toggleContent = () => {
      setIsHidden(!isHidden);
    };
    return (
      <div>
        <button onClick={toggleContent}>
          {isHidden ? 'Show' : 'Hide'}
        </button>
        <div className={isHidden ? 'hidden' : ''}>
          Content to be shown or hidden
        </div>
      </div>
    );
   }

Это несколько способов реализации кнопки скрытия и отображения в React.js. Не забудьте настроить код в соответствии с вашими требованиями.