React child component not to re-render when parent state changes

Question

I am new to React, and looked at similar questions in SO and could not find. It may be trivial, but please carry me.

I have nested components

const IndicatorsSteepCardContainer = React.createClass({ getInitialState () { return { steep: { Social: true, Tech: true, Economy: true, Ecology: true, Politics: true }, data: indicatorData } } render () { let props = this.props; let state = this.state; console.log('STATE inside steepcardcontainer >>>>', this.state.data); // VisualisationContainer to have different data eventually return ( <div className="indicators"> <h3 className="description-text">Tap on an issue group below to filter indicators available in the data visualisation. Tap it again to return to the full list of indicators.</h3> <div className='steep container steep-container'> <SteepCard selected={ this.selectedSteeps } steep="Social" data={ props.data.themeData } class="yellow" title="Social" steepIcon={ SocialIcon } /> <SteepCard selected={ this.selectedSteeps } steep="Tech" data={ props.data.themeData } class="blue" title="Tech" steepIcon={ TechIcon }/> <SteepCard selected={ this.selectedSteeps } steep="Economy" data={ props.data.themeData } class="pink" title="Economy" steepIcon={ EconomyIcon } /> <SteepCard selected={ this.selectedSteeps } steep="Ecology" data={ props.data.themeData } class="green" title="Ecology" steepIcon={ EcologyIcon } /> <SteepCard selected={ this.selectedSteeps } steep="Politics" data={ props.data.themeData } class="orange" title="Politics" steepIcon={ PoliticsIcon } /> </div> <VisualisationContainer data={this.state.data}/> </div> ); } }); 

Here is the rendering method in the VisualizationContainer component:

 render () { console.log('props inside visualisation-container>>>', this.props.data); return ( <div className='visualisation-container'> <div className="render-button" onTouchTap= { this.d3It.bind(null, this.selectedSteeps) }> Plot graph </div> <div className="update-button" onTouchTap= { this.update.bind(null, this.selectedSteeps) }> Update </div> <div className="indicator-items"> <IndicatorList data={this.props.data} className="indicator-list" /> <SelectedIndicators visible={true} onClick={this.toggleVisibility}/> </div> </div> ); } 

This component has another nested component inside it called IndicatorList, here is the code for this component:

 render () { let props = this.props; let keys = Object.keys(props.data); console.log('props inside indicator-list>>>', props.data); let allIndicators = []; keys.forEach(function(key){ var indicators = Object.keys(props.data[key]); allIndicators.push(indicators); // console.log(allIndicators); }); let merged = [].concat.apply([], allIndicators); return ( <div className="indicator-list"> { merged.map((val, i) => { return <Indicator className="indicator-name" key={i} value={val} /> }) } </div> ); } 

Finally, this component returns another component, which is simply DIV elements that are dynamically generated based on the data in the SteepCardContainer component.

  render () { return ( <div> { this.props.value }</div> ); } 

I pass all the data used by these components through the props from the SteepCardContainer state. Initially, when the page loads, the data is sent down, and everything that is inside state.data is used as elements of the indicator component, which is the last nested component in the hierarchy. So, my problem is that when the state changes, the props are not updated from the steepcardcontainer component. that is, the state changes, and I see that, however, the details are not updated - in particular, VisualisatioContainer does not have updated details, even if the state has changed. This is the problem that I have. Any help is greatly appreciated.

Answer 1

The first thing I would like to do is.

  render () { let propsdThemeData = this.props.data.themeData; let stateData = this.state.data; console.log('STATE inside steepcardcontainer >>>>', this.state.data); // VisualisationContainer to have different data eventually return ( <div className="indicators"> <h3 className="description-text">Tap on an issue group below to filter indicators available in the data visualisation. Tap it again to return to the full list of indicators.</h3> <div className='steep container steep-container'> <SteepCard selected={ this.selectedSteeps } steep="Social" data={ propsdThemeData } class="yellow" title="Social" steepIcon={ SocialIcon } /> <SteepCard selected={ this.selectedSteeps } steep="Tech" data={ propsdThemeData } class="blue" title="Tech" steepIcon={ TechIcon }/> <SteepCard selected={ this.selectedSteeps } steep="Economy" data={ propsdThemeData } class="pink" title="Economy" steepIcon={ EconomyIcon } /> <SteepCard selected={ this.selectedSteeps } steep="Ecology" data={ propsdThemeData } class="green" title="Ecology" steepIcon={ EcologyIcon } /> <SteepCard selected={ this.selectedSteeps } steep="Politics" data={ propsdThemeData } class="orange" title="Politics" steepIcon={ PoliticsIcon } /> </div> <VisualisationContainer data={stateData}/> </div> ); } 

Answer 2

I believe that you are mixing ES6 and React.createClass . These are two different ways to create React components.

See here: https://facebook.imtqy.com/react/docs/reusable-components.html#es6-classes

I’m kind of surprised that this works at all. Here is the difference:

ES6 Class:

 class HelloMessage extends React.Component { render() { return <div>Hello {this.props.name}</div>; } } 

**

React.createClass:

 const HelloMessage = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); 

Correct this and see if the error persists.

Answer 3

I just found out what the problem was: I should have had ComponentUpdate () always return false in the render component. Hope this helps if someone has the same problem.