React: component subscribing to redux store changes - reactjs

Question

I am currently trying to use react-redux to subscribe to store changes for newsItems changes. My current component which is working but not listening for store changes as it should be looks like:
class Home extends Component {
state = { loading: false };
displayName = Home.name
render() {
let contents = this.renderContents(store.getState().newsItems);
return (
<div>
{contents}
</div>
);
}
renderContents = (newsItems) => {
var largeNewsItems = newsItems.splice(0, 2);
var firstNewsItem = largeNewsItems[0];
var secondNewsItem = largeNewsItems[1];
return (
<div>
<div>
<LargeNewsItem newsItem={firstNewsItem} />
</div>
<div>
<LargeNewsItem newsItem={secondNewsItem} />
</div>
</div>
);
}
}
export default Home;
when trying to update it to subscribe to teh store, I've made the following attempt:
class Home extends Component {
state = { loading: false };
displayName = Home.name
render(props) {
let contents = this.renderContents(props.newsItems);
return (
<div>
{contents}
</div>
);
}
renderContents = (newsItems) => {
var largeNewsItems = newsItems.splice(0, 2);
var firstNewsItem = largeNewsItems[0];
var secondNewsItem = largeNewsItems[1];
return (
<div>
<div>
<LargeNewsItem newsItem={firstNewsItem} />
</div>
<div>
<LargeNewsItem newsItem={secondNewsItem} />
</div>
</div>
);
}
}
const mapStateToProps = function(state) {
return {
newsItems: state.newsItems
}
}
export default connect(mapStateToProps)(Home);
which results in error:
TypeError: Cannot read property 'newsItems' of undefined
where I call props.newsItems.
What am I doing wrong here and how can I overcome it?
UPDATE:
it looks like I can overcome it by using:
`render() {
let contents = this.renderContents(this.props.newsItems);
return (
<div>
{contents}
</div>
);
}`
however my LargeNewsItem components will be passed null data once in a while. How can I overcome this and essentially "wait" until newsItems is populated

Answer 1

One approach could be to replace your render method as below .
`
render() {
const newsItems = this.props.newsItems;
if(!newsItems) {
return null;
}
let contents = this.renderContents(this.props.newsItems);
return (
<div>
{contents}
</div>
);
}`
this way if your newsitems is null you wont get an error and once the newsitems uddates your render method will be called again