React Hide/Show toggle

Функциональность «показать/скрыть» является одной из наиболее часто используемых в веб-разработке. Хорошая практика — иметь шаблон часто используемых компонентов.

Необходимые условия

react
jsx
hooks(useState)

Код

Переключение компонента

import React, { useState } from 'react'


export default function Togglebtn() {

    const [show, setShow] = useState(false);

    const handleChange = () => {
        setShow(!show)
    }
    return (
        <div>
            <button onClick={handleChange}>Show/Hide</button>
            {show && <h1>Show Data @!!!!!!</h1>}
        </div>
    )
}

Войти в полноэкранный режим Выйти из полноэкранного режима

Вызов в app.js

import './App.css';
import Togglebtn from './components/Togglebtn';
function App() {
  return (
    <>
      <Togglebtn></Togglebtn>
    </>
  );
}

Вход в полноэкранный режим Выход из полноэкранного режима