{"id":16507,"date":"2023-01-24T10:39:16","date_gmt":"2023-01-24T05:09:16","guid":{"rendered":"https:\/\/www.guvi.in\/blog\/?p=16507"},"modified":"2025-11-06T10:56:29","modified_gmt":"2025-11-06T05:26:29","slug":"how-to-toggle-an-element-in-react-react-hooks","status":"publish","type":"post","link":"https:\/\/www.guvi.in\/blog\/how-to-toggle-an-element-in-react-react-hooks\/","title":{"rendered":"How To Toggle an Element in React? | React Hooks"},"content":{"rendered":"\n

What happens when a user clicks a button and a hidden element suddenly appears? That small shift on the screen looks simple but relies on React\u2019s efficient state control. Toggling an element is a core action that reflects how React updates the user interface based on state changes. Understanding this process helps you create smoother and more controlled user experiences.<\/p>\n\n\n\n

Read the full blog to learn the complete steps for toggling an element using React Hooks and practical code examples that you can apply immediately.<\/p>\n\n\n\n

Methods To Toggle an Element in React<\/strong><\/h2>\n\n\n\n

Method 1: Using useState() hook<\/h3>\n\n\n\n

The useState() hook allows us to easily manage the state in our components. To toggle an element, we can create a state variable that keeps track of the visibility of the element, and a function that updates the state when the toggle button is clicked. See the example of how to do this:<\/p>\n\n\n\n

Step 1: Create the initial state <\/strong><\/h4>\n\n\n\n

First, we’ll define the initial state. In this example, we have imported the useState from React and use a state variable called toggle<\/strong> which will determine whether the element is toggle or not.<\/p>\n\n\n\n

import React, { useState } from \"react\";\n\nconst [toggle, setToggle] = useState(true);<\/code><\/pre>\n\n\n\n
Step 2: Create the toggle function <\/strong><\/h4>\n\n\n\n
Next, we’ll create a function that will toggle the visibility of the element. We have created a function that will be called when the toggle button is clicked, and it will update the visible state variable using the setToggle function.<\/p>\n\n\n\n
import React, { useState } from \"react\";\n\nfunction App() {\n\n  const [toggle, setToggle] = useState(true);\n\n  const onToggle = () => {\n    setToggle(!toggle);\n  };\n\n}<\/code><\/pre>\n\n\n\n
Step 3: Add the toggle button and element <\/strong><\/h4>\n\n\n\n
Now we can add the toggle button and the toggle element to our component. In this example, we’re using a simple ternary operator to determine whether the toggle element should be visible or not. When the visible state is true<\/strong>, the toggle element will be displayed, it will be hidden.<\/p>\n\n\n\n
import React, { useState } from \"react\";\n\nfunction App() {\n\n  const [toggle, setToggle] = useState(true);\n\n  const onToggle = () => {\n    setToggle(!toggle);\n  };\n\n  return (\n    <div className=\"container\">\n      <div className=\"flex flex-col gap-4 items-center justify-center mt-10\">\n        <button onClick={onToggle} className=\"p-2 bg-[#8FD678] hover:bg-[#559840] rounded-md text-white\">Toggle<\/button>\n        {toggle && <h1 className=\"text-3xl font-bold\">Welcome to HCL Guvi<\/h1>}\n      <\/div>\n    <\/div>\n  );\n}\n\nexport default App;<\/code><\/pre>\n\n\n\n
Method 2: Using useToggle() hook<\/h3>\n\n\n\n
A useToggle() hook takes a parameter with the value true or false and toggles that value to the opposite. It is a custom hook created when we want to take some action to its opposite action. Here in the example, we will be showing and hiding an <h1> element on a click of a toggle button.<\/p>\n\n\n\n
Step 1: Create a useToggle() hook<\/h4>\n\n\n\n
import React, { useCallback, useState } from \"react\";\n\nconst useToggle = (initialState = false) => {\n  \n  const [state, setState] = useState(initialState); \/\/initialize the state\n  const toggle = useCallback(() => setState((state) => !state), []); \/\/toggle the state\n\n  return [state, toggle];\n};<\/code><\/pre>\n\n\n\n
Step 2: Create the initial state<\/h4>\n\n\n\n
Now we’ll use the custom useToggle() hook to initialize our state toggle.<\/p>\n\n\n\n
function App() {\n   return (\n      const [toggle, setToggle] = useToggle(); \/\/initialize the state using custom useToggle() hook\n      ...\n   );\n}<\/code><\/pre>\n\n\n\n
Step 3: Add the Toggle button and element<\/h4>\n\n\n\n
import React, { useCallback, useState } from \"react\";\n\nconst useToggle = (initialState = false) => {\n  \n  const [state, setState] = useState(initialState); \/\/initialize the state\n  const toggle = useCallback(() => setState((state) => !state), []); \/\/toggle the state\n\n  return [state, toggle];\n};\n\nfunction App() {\n\n  const [toggle, setToggle] = useToggle(); \/\/initialize the state\n\n  return (\n    <div className=\"container\">\n      <div className=\"flex flex-col gap-4 items-center justify-center mt-10\">\n        <button\n          onClick={setToggle}\n          className=\"p-2 bg-[#8FD678] hover:bg-[#559840] rounded-md text-white\"\n        >\n          Toggle\n        <\/button>\n        {toggle && <h1 className=\"text-3xl font-bold\">Welcome to HCL Guvi<\/h1>}\n      <\/div>\n    <\/div>\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n
Method 3: Using useReducer() hook<\/h3>\n\n\n\n
A useReducer() hook is a powerful tool for managing the state in React components.<\/a> It is more useful when we need to toggle the visibility of an element, as it allows us to handle the state changes in a clean and organized way.<\/p>\n\n\n\n
Step 1: Create the initial state <\/strong><\/h4>\n\n\n\n
First, we’ll import useReducer from React and then define the initial state. In this example, we’ll use an object with a single property called visible that will determine whether the toggle element is visible or not.<\/p>\n\n\n\n
import React, { useReducer } from 'react';\n\nconst initialState = { visible: false };<\/code><\/pre>\n\n\n\n
Step 2: Define the reducer function <\/strong><\/h4>\n\n\n\n
Next, we’ll define the reducer function that will handle the state changes. This function takes in the current state and an action, and returns the new state based on the action. In this example, we’ll define a single action type called TOGGLE that will toggle the visibility of the element.<\/p>\n\n\n\n
const reducer = (state, action) => {\n  switch (action.type) {\n    case 'TOGGLE':\n      return { ...state, visible: !state.visible };\n    default:\n      return state;\n  }\n};<\/code><\/pre>\n\n\n\n
Step 3: Use the useReducer hook <\/strong><\/h4>\n\n\n\n
Now we can use the useReducer hook to manage the state in our Toggle component. The hook takes in the reducer function and the initial state and returns the current state and a dispatch function. We’ll use the dispatch function to dispatch the TOGGLE action whenever the toggle button is clicked.<\/p>\n\n\n\n
import React, { useReducer } from 'react';\n\nconst initialState = { visible: false };\n\nconst reducer = (state, action) => {\n  switch (action.type) {\n    case 'TOGGLE':\n      return { ...state, visible: !state.visible };\n    default:\n      return state;\n  }\n};\n\nfunction App() {\n\n  const [state, dispatch] = useReducer(reducer, initialState);\n\n  return (\n    <div className=\"flex flex-col gap-4 items-center justify-center mt-10\">\n      <button onClick={() => dispatch({ type: 'TOGGLE' })} className=\"p-2 bg-blue-700 hover:bg-blue-900 rounded-md text-white\">Toggle<\/button>\n      {state.visible ? <h1 className=\"text-3xl font-bold text-green-600\">Welcome to HCL Guvi<\/h1> : null}\n    <\/div>\n  );\n}\n\nexport default App;<\/code><\/pre>\n\n\n\n
Master React and beyond with our Full Stack Development Course<\/strong><\/a>, build interactive web apps, learn front-end and back-end technologies, and create projects that showcase your coding skills. Get globally recognized certification and 100% placement support to launch your developer career.<\/p>\n\n\n\n
How To Set Up a React App<\/strong>?<\/h2>\n\n\n\n
Step 1: Install Node.js and npm<\/strong><\/h3>\n\n\n\n
Download and install Node.js<\/strong> from the official website https:\/\/nodejs.org. The Node.js installation also includes npm<\/strong>, which is the Node package manager.
Verify the installation in the terminal with:<\/p>\n\n\n\n
node -v\n\nnpm -v<\/code><\/pre>\n\n\n\n
Step 2: Create a New React Application<\/strong><\/p>\n\n\n\n
Use create-react-app<\/strong>, a command-line tool that sets up the React environment automatically.
Run this command in the terminal:<\/p>\n\n\n\n
npx create-react-app my-react-app<\/code><\/pre>\n\n\n\n
The npx<\/strong> command comes with npm version 5.2 or higher and runs packages without installing them globally. The tool creates a folder named my-react-app<\/strong> and installs all required dependencies.<\/p>\n\n\n\n
Step 3: Navigate to the Project Directory<\/strong><\/p>\n\n\n\n
Move into the project folder by using:<\/p>\n\n\n\n
cd my-react-app<\/code><\/pre>\n\n\n\n
Step 4: Start the Development Server<\/strong><\/p>\n\n\n\n
Run the local development server to preview the application:<\/p>\n\n\n\n
npm start<\/code><\/pre>\n\n\n\n
The application opens automatically in the browser at http:\/\/localhost:3000.<\/p>\n\n\n\n
Step 5: Understand the Project Structure<\/strong><\/h3>\n\n\n\n
The project folder contains several key files and directories:<\/p>\n\n\n\n