Unable to conceal a DIV using React

Question

Unable to conceal a DIV using React

I'm attempting to hide a div programmatically upon clicking a button. I've written the following code, but it doesn't seem to be working (the Div remains visible):

import React, {useState} from 'react';
import './Button.css';

export function Button() {
    const [click, setClick] = useState(false);

    const hideDiv = () => {
        var display = 'block';
    
        if (click){
            display = 'none';
            setClick(false);
        }else{
            display = 'block';
            setClick(true);
        }
    
        return ([
            document.getElementById('main').style.display = {display}
        ])
    };

    return(
        <button className='btn' onClick={() => setClick(true), hideDiv}>Some button!</button>
    );
};

I "debugged" the application with an alert message and confirmed that the correct display value is being set, but there seems to be an issue when applying it to the div's style.

What am I overlooking here?

css reactjs

Answer 1

Answer №1

Give this method a try:

function CustomButton() {
  const [displaySetting, setDisplaySetting] = useState("visible");

  const toggleDiv = () => {
    setDisplaySetting(displaySetting === "hidden" ? "visible" : "hidden");
  };

  return (
    <>
      {displaySetting === "visible" && <div>MY CUSTOM DIV</div>}
      <button className="custom-btn" onClick={toggleDiv}>
        Click me!
      </button>
    </>
  );
}

CODESANDBOX - https://codesandbox.io/s/wizardly-water-kf0md?file=/src/App.js

Answer 2

Give this method a try:

function CustomButton() {
  const [displaySetting, setDisplaySetting] = useState("visible");

  const toggleDiv = () => {
    setDisplaySetting(displaySetting === "hidden" ? "visible" : "hidden");
  };

  return (
    <>
      {displaySetting === "visible" && <div>MY CUSTOM DIV</div>}
      <button className="custom-btn" onClick={toggleDiv}>
        Click me!
      </button>
    </>
  );
}

CODESANDBOX - https://codesandbox.io/s/wizardly-water-kf0md?file=/src/App.js

Answer 3

Answer №2

In accordance with @dai's advice, it is recommended not to directly manipulate the DOM within React (as it operates on a virtual representation of the DOM).

Consider utilizing states instead, like this:

import React, {useState} from 'react';
import './Button.css';

export function Button() {
    const [display, setDisplay] = useState(true);

    const hideDiv = () => {
        setDisplay(!display);
     };

    return (
      <>
        {display && (<div id='main'></div>)}
        <button className='btn' onClick={hideDiv}>Some button!</button>
      <>
    );
};

If the div you intend to include is another component, it is advisable to use contexts instead.

Answer 4

In accordance with @dai's advice, it is recommended not to directly manipulate the DOM within React (as it operates on a virtual representation of the DOM).

Consider utilizing states instead, like this:

import React, {useState} from 'react';
import './Button.css';

export function Button() {
    const [display, setDisplay] = useState(true);

    const hideDiv = () => {
        setDisplay(!display);
     };

    return (
      <>
        {display && (<div id='main'></div>)}
        <button className='btn' onClick={hideDiv}>Some button!</button>
      <>
    );
};

If the div you intend to include is another component, it is advisable to use contexts instead.

Unable to conceal a DIV using React

Answer №1

Answer №2

Similar questions

Adjust iFrame to allow scrolling dynamically

When inline elements are positioned right next to block elements

An error is thrown when trying to use an imported function from Next.js in the getServerSideProps function, resulting in a 'Reference

Is it recommended to use Formik alongside the antd4 Form Component?

Creating a dual style name within a single component using Styled Components

Utilize Material-UI's <Autocomplete /> feature to conduct searches using multiple parameters

Ways to obtain the file path of the compiled worker.js loaded from the worker loader, along with its hash

What are some ways to personalize the depth graph in amcharts?

The issue of anchor links (#) not functioning properly when navigating within the same page of a Next.JS app router

Implementing the rotation of an element using 'Transform: rotate' upon loading a webpage with the help of Jquery, Javascript, and

Including a personalized User-Agent string in my headers for fetch requests

Impact of designs on the elements within components

Switching the active className in React and Next.js based on selection status

How can I use CSS to transform a "+" symbol to an "x"?

Encountering 503 errors with Heroku while making asynchronous API calls in my React application

Implement lazy loading for scripts in Next JS

Why won't my sticky element function properly with the position attribute set to sticky?

Interfacing ReactJS with Webview on Native Android platform (undefined variable 'Android' no-undef)

Concealing and wrapping text using CSS in a table structure

How can I get rid of the underline in a Material-UI select component?