title: Component's children should not be mutated
body: <p>I have a <code>react-redux</code> app. I get data via AJAX part of Redux store. This part looks like this:</p>
  
  <pre><code>    counts: {
          warning: 0,
          new: 0,
          in_hands: 0,
          completed: 0,
          rejected: 0
      }
  </code></pre>
  
  <p>After changing this values React renders the component</p>
  
  <pre><code>render() {
  
          var counts = [
              {
                  id: 'warning',
                  count: parseInt(this.props.counts.warning),
                  name: 'Внимение'
              },
              {
                  id: 'new',
                  count: parseInt(this.props.counts.new),
                  name: 'Новые'
              },
              {
                  id: 'in_hands',
                  count: parseInt(this.props.counts.in_hands),
                  name: 'В работе'
              },
              {
                  id: 'completed',
                  count: parseInt(this.props.counts.completed),
                  name: 'Выполн.'
              },
              {
                  id: 'rejected',
                  count: parseInt(this.props.counts.rejected),
                  name: 'Отменен.'
              }
          ];
  
      content = (&lt;div className="inside-loader"/&gt;);
  
      return(
          &lt;div&gt;
          &lt;Tabs key="tabs_order-list" id="order-list" items={counts} defaultTab="warning" changeList={this.changeList} content={content}/&gt;&lt;/div&gt;
      )
  }
  </code></pre>
  
  <p>inside <code>Tabs</code> component we can see this:</p>
  
  <pre><code>render() {
          let self = this;
          let items = this.props.items.map(function (item, index) {
              return &lt;div key={self.props.id+'_'+index} onClick={self.changeTab.bind(null, item.id)} className={'bar-tabs__tab ' + (self.state.openedTabId == item.id ? 'active' : '')}&gt;
                  &lt;b&gt;{item.count}&lt;/b&gt;
                  &lt;span&gt;{item.name}&lt;/span&gt;
              &lt;/div&gt;
          })
          return &lt;div&gt;
              &lt;div className={'bar-tabs bar-tabs__' + this.props.id}&gt;{items}&lt;/div&gt;
              &lt;div className={'bar-tabs-content bar-tabs-content__' + this.props.id}&gt;
                  &lt;div className='bar-tabs-content__tab active'&gt;{this.props.content}&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      }
  </code></pre>
  
  <p>However, in the console I see this:</p>
  
  <p><a href="https://i.stack.imgur.com/HRTkp.png" rel="nofollow noreferrer">screen of console</a></p>
  
  <p>I read about similar problems and I understand that this warning occurs when I try to change <code>props</code> values. But I didn't change <code>props</code> values.</p>