'How to toggle between display: none and display:block on click

I am using a React library to implement a bar chart and what I am trying to achieve is to show the tooltip only when I click on a series. I am trying to achieve this by toggling between display block and none, but currently, the tooltip is not showing up. What am I doing wrong here? Here is my code:

import React, { useState } from 'react';
import * as ReactDOM from 'react-dom';
import {
  Chart,
  ChartTooltip,
  ChartSeries,
  ChartSeriesItem,
  ChartSeriesItemTooltip,
} from '@progress/kendo-react-charts';
import 'hammerjs';
const seriesData = [1, 2, 3];
const ChartContainer = () => {
  let [isVisible] = React.useState('none');
  return (
    <Chart
      onSeriesClick={(e) => {
        // let positionX = e.originalEvent.x.client;
        // let positionY = e.originalEvent.y.client;
        // let value = e.value;

        // alert(positionX, positionY, value);
        let positionX = e.nativeEvent.x;
        let positionY = e.nativeEvent.y;
        let value = e.value;
        let myTooltip = document.querySelector('.k-chart-tooltip-wrapper');
        console.log(myTooltip);
        myTooltip.style.display = 'block' != 'none';
      }}
    >
      <ChartTooltip className="my-tooltip" />
      <ChartSeries>
        <ChartSeriesItem data={seriesData} />
        <ChartSeriesItem data={seriesData}>
          <ChartSeriesItemTooltip background="green" />
        </ChartSeriesItem>
      </ChartSeries>
    </Chart>
  );
};

ReactDOM.render(<ChartContainer />, document.querySelector('my-app'));

and here is an example that can be tested:

https://stackblitz.com/edit/react-ahypjv-xtf7nr?file=app/main.jsx

javascript reactjs

Solution 1:^[1]

This won't work:

        myTooltip.style.display = 'block' != 'none';

'block' != 'none' is a comparison that produces a boolean value, so this is equivalent to:

        myTooltip.style.display = true;

It looks almost sensible, but as you know, that's not how the display CSS property works.

If you're trying to toggle it, just check the current value and change it to its opposite:

        myTooltip.style.display = myTooltip.style.display == 'block' ? 'none' : 'block';

It might be nice to introduce a CSS class for it, for example .tooltip-visible, so that you can write:

        myTooltip.classList.toggle('tooltip-visible');

Solution 2:^[2]

The property display: none prevents an element from being included in the DOM during the render phase. You either need to change to visibility:hide (not ideal for tooltips) or use React to inject the element.

<Chart
  onSeriesClick={()=>{this.setState({tooltipVisible:true}}>
  { this.state.tooltipVisible ? <Tooltip /> : <></> }
</Chart>

Managing the state of tooltips could become cumbersome if you have many of them, so you might consider a library to handle it for you such as Bootstrap.

To both hide an element and remove it from the document layout, set the display property to none instead of using visibility. -"visibility - CSS: Cascading Style Sheets | MDN"

Solution 3:^[3]

set a state with the value "none"

const [display, setDisplay] = useState("none")

Put an onClick envent on the button that calls to the followin function:

function toggleDisplay() {
  if (display === "none") {
   setDisplay("block")
  else {
   setDisplay("none")
  }
}

this way when your button is clicked you toggle that state between the values you need.

Then in the element you way to set the display porperty add the style prop and set your display state as the display CSS value:

<MyComponent style={{display: display}} />

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Thomas
Solution 2	Sydney Y
Solution 3	Kaze

'How to toggle between display: none and display:block on click

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]