React Hide/Show toggle

Show/hide functionality is one of the most frequently used utility in web dev.. It's a good practice to have template of frequently used components.

Prerequisites

• react
• jsx
• hooks(useState)

Code

Toggle component

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>
    )
}

Calling in app.js

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