DEV Community

Himanshupal0001
Himanshupal0001

Posted on

React Hide/Show toggle

#react #javascript #beginners #webdev

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> ) }
Enter fullscreen mode Exit fullscreen mode

Calling in app.js

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

Top comments (0)