I have a react-redux . I get data through the AJAX part of the Redux store. This part is as follows:
counts: { warning: 0, new: 0, in_hands: 0, completed: 0, rejected: 0 }
After changing these values, React displays 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 the 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 the following:
console screen
I read about similar problems and I understand that this warning occurs when I try to change props values. But I did not change the props value.