title: Why do I get a warning when cloning elements with new props in render() with react/redux?
body: <p>I'm working on a react/redux app and want my tabbed components to use the redux store for their active tab state. I attempted to do this in as generic a way as possible to share the functionality among all of my different tab components; this resulted in a generic tab panel with the following render method:</p>
  
  <pre><code> render () {
      var activeTarget = this.props.panelState.tabPanes[this.props.tabPanelID] ? this.props.panelState.tabPanes[this.props.tabPanelID].activeTarget : this.props.defaultTarget;
      var tabs = this.props.panelState.tabs;
      var tabPanelID = this.props.tabPanelID;
      // Add the tabPanelID and active properties to the tab pane children
      const childrenWithProps = React.Children.map(this.props.children,
          (child) =&gt; React.cloneElement(child, {
              tabPanelID: tabPanelID,
              active: activeTarget === child.props.id
          })
      );
      // Render complete tab pane
      return (
          &lt;div&gt;
              &lt;ul className="nav nav-tabs"&gt;
                  {this.buildTabs()}
              &lt;/ul&gt;
              &lt;div className="tab-content"&gt;
                  {childrenWithProps}
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>However, the map call appears to result in the following warning:</p>
  
  <blockquote>
    <p>Warning: setState(...): Cannot update during an existing state transition (such as within <code>render</code> or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount</p>
  </blockquote>
  
  <p>Unless I'm mistaken I'm not actually changing the state here, so I'm not certain why I'm getting this warning. I'm relatively new to react, though, so it's likely enough that I'm missing something or misunderstanding.</p>
  
  <p>Any assistance would be greatly appreciated.</p>
  
  <p>Edit: for those wondering, here is the contents of buildTabs():</p>
  
  <pre><code>buildTabs() {
      var result = [];
      var tabPanelID = this.props.tabPanelID;
      // Create a tab for each tab in the props
      for(var i = 0; i &lt; this.props.tabs.length; i++) {
          result.push
          (
              &lt;Tab tabPanelID={this.props.tabPanelID} bare={this.props.tabs[i].bare} key={i} target={this.props.tabs[i].target} 
                  active={this.props.panelState.tabPanes[tabPanelID] ? 
                      (this.props.panelState.tabPanes[tabPanelID].activeTarget === this.props.tabs[i].target) : 
                      this.props.tabs[i].target == this.props.defaultTarget} 
                      additionalClasses={this.props.additionalTabClasses}&gt; 
                  {this.props.tabs[i].contents}
              &lt;/Tab&gt;
          )
      }
      return result;
  }
  </code></pre>
  
  <p>I simply didn't include that before because I can leave that in without issue, but removing the call to Children.map eliminates the warning.</p>