DEV Community

Himanshupal0001
Himanshupal0001

Posted on

1 1

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

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)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay