componentWillReceiveProps not firing

Question

In my other classes, componentWillReceiveProps was working nicely, but for some reason, it isn't firing here.

ItemView.jsx

class ItemView extends React.Component {     constructor(props) {         super(props);          this.state = {             name: null,              rating: null,              sector: null,              location: null,              description: null,              image: "blank.png",             show: false        };     }      ...      componentWillReceiveProps(nextProps) {          if(!nextProps.companyToRender) {             this.setState({                 name: null,                  rating: null,                  sector: null,                  location: null,                  description: null,                  image: "blank.png",                 show: false             });        }        else {            var companyToRender = nextProps.companyToRender;             this.setState({                name: companyToRender.name,                 rating: companyToRender.rating,                 sector: companyToRender.sector,                 location: companyToRender.location,                 description: companyToRender.description,                 image: companyToRender.image,                show: true            });     }      ...      render () {        return(         <div>          ...         <CommentBox show={this.state.show} companyToRender={this.state.name}/>          ...         </div>        );      } } 

CommentBox.jsx

class CommentBox extends React.Component {     constructor(props) {         super(props);         this.state = {companyToRender: null};     }      componentWillReceiveProps(nextProps) {         this.setState({companyToRender: nextProps.companyToRender});     }      ... } 

The prop passed to itemView is either null if nothing is to be passed, or the array that ItemView is assigning to it.

componentWillReceiveProps() fires only when the state's attributes become null, but not when it sets. ( (null --> entry) doesn't work but (entry --> null) works).

Am I missing out on something? Thanks!

-- edit:

(null --> entry) updates state, but doesn't call the logs or any subsequent componentWillRecieveProps(). (But entry --> null does.)

Logs for null --> entry

Logs for entry --> null

Answer 1

After much painful debugging, I found out that the problem was that ItemView was being called inside a modal (react-bootstrap) which for some reason, doesn't support componentWillReceiveProps(). Ended up fixing the issue by refactoring the code. Thanks guys!

Answer 2

If anyone else is having a problem with this...

componentWillReceiveProps will not be called if you are receiving the exact same props as before. What you can do to get around it is add a dummy prop that iterates every time you want to send the same prop to the component in case that component internally resets itself somehow

click() {     this.setState({counter: ++this.state.counter, unchangingProp:true}) } <Component unchangingProp={this.state.unChangingProp} counter={this.state.counter}/> 

This way componentWillRecieveProps will be triggered every time.