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>
</>
);
}
Top comments (0)