title: what's the right way to remove dynamic DOM Nodes from an event handler in React?
body: <p>DOM manipulation are the simplest stuff offered by a JS library. But in react everything dynamic has to be in the state. It becomes super diificult to just add or remove simple DOM nodes. Maybe this are the cons of React or probably I don't know any other way. </p>
  
  <p>Take a look at this--</p>
  
  <pre><code>class Ripple extends React.Component {
      state = {
          ripples: []
      }
  
      render() {
          const { className } = this.props;
  
          return (
              &lt;div onClick={this.rippleNow} className={`${className} material__ripple`}&gt;
  
              {this.props.children}
  
              {this.state.ripples.map((Item, index) =&gt; (
                  &lt;Item key={index} /&gt;
              ))}
  
              &lt;/div&gt;
          );
      }
  
      rippleNow = ({ currentTarget, clientX, clientY }) =&gt; {
          const { x, y } = currentTarget.getBoundingClientRect(),
                { offsetHeight, offsetWidth } = currentTarget,
                dia = Math.min(offsetHeight, offsetWidth, 100);
  
  
          const styles = {
              top: (clientX - x) - dia / 2,
              left: (clientY - y) - dia / 2,
              width: dia,
              height: dia
          }
  
          const Wave = () =&gt; (
            &lt;div onAnimationEnd={this.removeRipple} style={styles}&gt;&lt;/div&gt;
          );
  
          this.setState(prev =&gt; {
             ripples: [...prev.ripples, Wave]
         });
      }
  
      removeRipple = (e) =&gt; {
          // How will i remove that element?
          // Or is there any other way to do the same?
      }
   }
  </code></pre>
  
  <p>How will i remove the element from the state? Or is there any other way to add or remove DOM Elements in <strong>react</strong> . As react doesn't allow modifying DOM directly .</p>
  
  <p>I am in a real problem . Thanks to those who'll even try to help .</p>