How to hide elements the reactjs way

My first attempt at hiding a react-bootstrap tool tip was pretty naive. I wrapped it in a div.

Grabbed it directly from the DOM. And then made it’s display: none.

This worked. But it’s not the react way to do things. Instead we want to control the hiding of the element with a property, and then have the element display or hide itself on the state of that property.

So first add some state.

Then define an event handler to handle the state change.

Then hook it up in your constructor

Then define a style variable that will render itself depending on the state of your component. And then use it in your render.

The thing with remember with react is you never want to directly touch the DOM. Let react do that for you. Instead define states and properties, and manipulate them through handlers.

Here’s the whole solution using a react-bootstrap tooltip.

 

Thanks to Kelvin for his help and guidance in solving this.