Component's children should not be mutated

Question

I have a react-redux app. I get data via AJAX part of Redux store. This part looks like this:

    counts: {
        warning: 0,
        new: 0,
        in_hands: 0,
        completed: 0,
        rejected: 0
    }

After changing this values React renders the component

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 = (<div className="inside-loader"/>);

    return(
        <div>
        <Tabs key="tabs_order-list" id="order-list" items={counts} defaultTab="warning" changeList={this.changeList} content={content}/></div>
    )
}

inside Tabs component we can see this:

render() {
        let self = this;
        let items = this.props.items.map(function (item, index) {
            return <div key={self.props.id+'_'+index} onClick={self.changeTab.bind(null, item.id)} className={'bar-tabs__tab ' + (self.state.openedTabId == item.id ? 'active' : '')}>
                <b>{item.count}</b>
                <span>{item.name}</span>
            </div>
        })
        return <div>
            <div className={'bar-tabs bar-tabs__' + this.props.id}>{items}</div>
            <div className={'bar-tabs-content bar-tabs-content__' + this.props.id}>
                <div className='bar-tabs-content__tab active'>{this.props.content}</div>
            </div>
        </div>
    }

However, in the console I see this:

screen of console

I read about similar problems and I understand that this warning occurs when I try to change props values. But I didn't change props values.

Answer 1

Are you positive that all of your counts are valid numbers? You should console.log the counts array in the first render() and check that none of the count values in each object of the array are NaN. If any of them is NaN, it might be related to this issue: https://github.com/facebook/react/issues/7424.

Simply check that your data is correct and you are not getting NaN after you parseInt.