title: Reactjs. Counter of renders
body: <p>How to make counter of renders the child component in parent?</p>
  
  <p>I have 2 components <code>Widget</code> (parent) and <code>Message</code>(child). I passed counter from child to parent and trying to set getting value from child set to state. And I getting err: <code>Maximum update depth exceeded.</code></p>
  
  <p>There is <strong>child</strong> component <code>Message</code>:</p>
  
  <pre><code>    import React, { Component } from "react";
  
  export default class Message extends React.Component {
    constructor(props) {
      super(props);
      this.changeColor = this.changeColor.bind(this);
      this.changeCount = this.changeCount.bind(this);
  
      this.state = { h: 0, counter: 0 };
    }
  
    changeColor = () =&gt; {
      this.setState(state =&gt; ({
        h: Math.random()
      }));
    };
  
    changeCount = () =&gt; {
      this.setState(state =&gt; ({
        counter: ++state.counter
      }));
    };
  
    componentDidUpdate(prevProps) {
      this.props.getColor(this.color);
      this.changeCount();
      this.props.getCount(this.state.counter);
    }
  
    render() {
      const { children } = this.props;
      const { s, l, a } = this.props.color;
  
      this.color = `hsla(${this.state.h}, ${s}%, ${l}%, ${a})`;
  
      return (
        &lt;p
          className="Message"
          onClick={this.changeColor}
          style={{ color: this.color }}
        &gt;
          {children}
        &lt;/p&gt;
      );
    }
  }
  </code></pre>
  
  <p>There is <strong>parent</strong> component:</p>
  
  <pre><code>import React, { Component } from "react";
  import Message from "./Message/Message";
  
  export default class Widget extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        color: {
          s: 30,
          l: 60,
          a: 1
        },
        counter: 0
      };
    }
  
    getCount = count =&gt; this.setState(state =&gt; ({
      counter: state.counter
    }));
  
    getColor = color =&gt; {
      console.log(`the color is ${color}`);
    };
  
    render() {
      const counter = this.state.counter;
  
      return (
        &lt;div&gt;
          &lt;Message
            getColor={this.getColor}
            getCount={this.getCount}
            color={this.state.color}
          &gt;
            {undefined || `Hello World!`}
          &lt;/Message&gt;
          {counter}
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>What I do wrong?</p>