How to hide or remove an element onClick in React?

Question

I am trying to hide an element 'GorillaSurfIn' after I click on it. But also it should fire the 'setShouldGorillaSurfOut' to 'true'. The second part works, but after I added this function:

function hideGorillaSurfIn() {
    let element = document.getElementById('gorilla-surf-in');
    ReactDOM.findDOMNode(element).style.display = 
  this.state.isClicked ? 'grid' : 'none';
}

After I click, the code falls apart.

Once I click, the element should be hidden/removed till the next time the App restarts.

Here is the Code Sandbox Link for further explanation.

I am open to any solutions, but also explanations please, as I am still fresh in learning React.

Answer 1

I have changed your code a bit to make it work. You can make further changes according to your need. A few things that I would like to add: -

1. You should avoid using findDOMNode (in most cases refs can solve your problem) as there are certain drawbacks associated with findDOMNode, such as the react's documentation states "findDOMNode cannot be used with functional components". I've used refs (forward ref in this case) to make it work.

2. GorillaSurfIn was called twice, so there were two Gorilla gifs on the screen with same IDs. Not sure if that was the intended behaviour but each element should have unique ID.

3. Check out the code sandbox.