title: React, Uncaught RangeError: Maximum call stack size exceeded
body: <p>I'm working in react and basically I want to make an button with tooltip, right now I'm making tooltip. I'm changing css display property in order to make it visible or not during mouse enter and leave. But there is an error and I don't know what to do...</p>
  
  <p>Here is my code:</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import Style from 'style-it'; 
  var Ink = require('react-ink');
  import FontIcon from '../FontIcon/FontIcon';
  
  var IconButton = React.createClass({ 
  
    getInitialState() {
        return {
            iconStyle: "",
            style: "",
            cursorPos: {},
        };
    },
  
    extend(obj, src) {
        Object.keys(src).forEach(function(key) { obj[key] = src[key]; });
        return obj;
    },
  
      Tooltip(props) {
  
          var style = {};
  
          if (this.tooltipDisplay) {
              style.display = "block";
          } else if (!this.tooltipDisplay) {
              style.display = "none";
          };
  
          return &lt;div className="tooltip" style={style}&gt;{_props.tooltip}&lt;/div&gt;;
      },
  
      showTooltip(){
          this.tooltipDisplay = true;
      },
  
      removeTooltip(){
          this.tooltipDisplay = false;
      },
  
    render() {
  
      var _props = this.props,
        tooltip = this.Tooltip,
        opts,
        tooltipDisplay = false,
        disabled = false,
        rippleOpacity,
          outterStyleMy = {
          border: "none",
              outline: "none",
              padding: "8px 10px",
          "background-color": "red",
          "border-radius": 100 + "%",
          cursor: "pointer",
          },
          iconStyleMy = {
              "font-size": 12 + "px",
              "text-decoration": "none",
              "text-align": "center",
              display: 'flex',
              'justify-content': 'center',
              'align-items': 'center',
          },
        rippleStyle = {
          color: "rgba(0,0,0,0.5)",
        };
  
      if (_props.disabled || _props.disableTouchRipple) {
        rippleStyle.opacity = 0;
      };
  
      this.setState({
        iconStyle: _props.iconStyle
      });
  
      this.setState({
        style: _props.style
      });
  
      if (_props.disabled) {
         disabled = true;
      };
  
      if (this.state.labelStyle) {
          iconStyleMy = this.state.iconStyle;
      };
  
      if (this.state.style) {
        outterStyleMy = this.state.style;
      };
  
      if (_props.href) {
        opts.href = _props.href;
      };
  
          var buttonStyle = this.extend(outterStyleMy, iconStyleMy);
  
          return(
          &lt;Style&gt;
          {`
            .IconButton{
              position: relative;
            }
            .IconButton:disabled{
              color: ${_props.disabledColor};
            }
            .btnhref{
              text-decoration: none;
            }
          `}
           &lt;a {...opts} className="btnhref" &gt; 
            &lt;tooltip text={this.props.tooltip} position={this.options} /&gt;
            &lt;button ref="button" className={"IconButton" + _props.className} disabled={disabled} style={buttonStyle}
            onMouseEnter={this.showTooltip} onMouseLeave={this.removeTooltip} &gt;
              &lt;Ink background={true} style={rippleStyle} opacity={rippleOpacity} /&gt;
              &lt;FontIcon className={_props.iconClassName}/&gt;
            &lt;/button&gt;
          &lt;/a&gt;
          &lt;/Style&gt;
          );
  
    }
  });
  
  
  
  ReactDOM.render(
   &lt;IconButton href="" className="" iconStyle="" style="" iconClassName="face" disabled="" disableTouchRipple="" tooltip="aaaaa" /&gt;,
   document.getElementById('app')
  );
  </code></pre>
  
  <p>In console I'm getting this error:</p>
  
  <pre><code>Uncaught RangeError: Maximum call stack size exceeded
  at defineRefPropWarningGetter (App.js:1053)
  at Object.ReactElement.createElement (App.js:1220)
  at Object.createElement (App.js:3329)
  at Constructor.render (App.js:43403)
  at App.js:15952
  at measureLifeCyclePerf (App.js:15233)
  at ReactCompositeComponentWrapper._renderValidatedComponentWithoutOwnerOrContext (App.js:15951)
  at ReactCompositeComponentWrapper._renderValidatedComponent (App.js:15978)
  at ReactCompositeComponentWrapper._updateRenderedComponent (App.js:15902)
  at ReactCompositeComponentWrapper._performComponentUpdate (App.js:15880)
  </code></pre>
  
  <p>I can't find out what's wrong. I know it might be something about calling a function which in turn calls another function. But I can't see anything like this in my code and I'm not sure if it's all about it. Thanks for help :)</p>