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

The same bootstrap column code shows varying behavior

The misaligned navigation bar and distortion on mobile devices are causing issues with the website's layout

What is the best way to target and style anchor links in CSS that are not empty?

What is the best way to manipulate the canvas "camera" in HTML?

I'm having trouble with axios.get when trying to search for a product by name

Tips for refreshing the page using NavLink from React-Router?

Determine the Nautical Miles Between Various Coordinate Points using React

React Router updates the URL path without actually rendering the content of the second page

The Heroku API is having trouble retrieving cookies

Material-UI: Creating Radio Button Groups

Tone.js is failing to sync sequences during playback

Steps for connecting a text to the Polyline feature in the React Google Maps API

Is there an alternative method for categorizing dependencies to determine which ones should be included in the deployment?

Does this Docker configuration successfully set up a React.js build to run on port 5000?

React is up and running smoothly on my local machine, but unfortunately encountering issues on Vercel

The importance of precision in a written text

Steps for retrieving and modifying the state (Object) of a Parent component from a Children component

Begin the NextJS project by redirecting the user to the Auth0 page without delay

Cannot display value in NumericFormat when using MUI TextField due to prefix restrictions

Leveraging the :has pseudo-class in Tailwind along with adjacent sibling selectors