Running setState prop function hang Maximum call stack
<p>On my template js I have the following </p>

<pre><code> updateBarTitle(title){
    this.setState({barTItle:title});
 }
 render() {
 const childrenWithProps  = React.Children.map(this.props.children, function (child) {
             var childProps = {
                updateBarTitle: this.updateBarTitle.bind(this)
            };
            var childWithProps = React.cloneElement(child, childProps);
            return childWithProps;
        }, this);
</code></pre>

<p>And on the child I have.</p>

<pre><code> componentDidUpdate(){
    this.props.updateBarTitle('Users');
 }
</code></pre>

<p>When testing out the app and once state changes my browser freezes for a long time then returns a <code>Maximum call stack size exceeded</code> Need some advice on what I'm doing wrong. </p>