Correctly accept the data in the rect class?

Lads, Hello.
Need your help.
There's a component
import React {Component} from 'react';
import {connect} from 'react-redux';
import Helper from './Helper';
import ProgressBar from './ProgressBar';
/**
 * class declaration
*/
DashAnalytics class extends Component {
/**
 * Renders "DashAnalytics component"
 * @return {string} HTML markup for the component
*/
 render() {
 const tags = this.props.venues.tagPollination;
 const pollination = this.props.venues.pollination;
 const totalUsersInTag = (() => {
 let totalUsers = 0;
 Object.keys(tags).forEach((key) => {
 totalUsers += tags[key].totalUsers;
});
 return totalUsers;
})();
 const totalUsersInPollination = (() => {
 let totalUsers = 0;
 Object.keys(pollination).forEach((key) => {
 totalUsers += pollination[key].totalUsers;
})
 return totalUsers;
})();
 Object.keys(tags).forEach((key) => {
 tags[key].barValue = Math.round((tags[key].totalUsers / totalUsersInTag) * 100);
 tags[key].barName = tags[key].tagName;
})
 return (
 <div classname="analytics">
 <div classname="Analytics__lside">
 <div classname="Analytics__header"> 
 <div classname="Analytics__heading">Top 5 Biggest Venue Pollination</div>
 <div classname="Analytics__help">
<helper>
</helper></div>
</div>
 <div classname="Analytics__body">
 <progressbar colorfill="#1b75a2" collorbar="#3399cc">
</progressbar></div>
</div>
 <div classname="Analytics__rside">
 <div classname="Analytics__header"> 
 <div classname="Analytics__heading">Top 5 Pollination Custom Tags</div>
 <div classname="Analytics__help">
<helper>
</helper></div>
</div>
 <div classname="Analytics__body">
 <progressbar analyticdata="{tags}">
</progressbar></div>
</div>
</div>
);
}
}

function mapStateProps({venues}) {
 return {venues};
}

export default connect(mapStateProps)(DashAnalytics);

I have a question for you:
Whether I organized it and why the function in a variable totalUsersInTag takes place and considers the rules, and in totalUsersInPollination throws a TypeError: Cannot convert undefined or null to object.
The structure of objects the same, the difference is that the first object I initilizer(with empty values) in redux, and the other is not(accordingly he initially undefined).
Please tell me what to do in this situation to avoid such errors
June 14th 19 at 18:54
1 answer
June 14th 19 at 18:56
Solution
Why not write a simple test
const totalUsersInPollination = (() => {
 let totalUsers = 0;
if (pollination!==undefined && pollination!==null){
 Object.keys(pollination).forEach((key) => {
 totalUsers += pollination[key].totalUsers;
})
}
 return totalUsers;
 })();
I agree, but I thought in each reacti have something of their own for situations like this - Colleen.Johnston commented on June 14th 19 at 18:59
as a variant of react, you can specify the default props
class AddAddressComponent extends React.Component {
 render() {
 let {provinceList,cityList} = this.props
 if(cityList === undefined || provinceList === undefined){
 console.log('undefined props')
 } else {
 console.log('defined props')
}

 return (
the <div>rendered</div>
)
}
}

AddAddressComponent.defaultProps = {
 cityList: [],
 provinceList: [],
};

AddAddressComponent.propTypes = {
 userInfo: React.PropTypes.object
 cityList: React.PropTypes.array.isRequired,
 provinceList: React.PropTypes.array.isRequired,
}

ReactDOM.render(
<addaddresscomponent>,
document.getElementById('app')
)</addaddresscomponent>
- Raquel.Labad commented on June 14th 19 at 19:02

Find more questions by tags JavaScriptReact