React component not rerendering when props changes

Question

Here are my 2 React components - Parent and Child

class ParentComponent extends Component{

 render(){      
    /* consultations comes from redux store 
    and looks like { consultation_id:123, date:10/12/2013 } */
   return(
    _.map(this.props.consultations,(consultation)=>{

      return{
        <ChildComponent consultation={consultation} />
      }
    })
   );
  }
}

class ChildComponent extends Component{

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

My problem is that I have certain actions that modify the consultations object. For eg: the props.consultation.date changes in the parent component, but the child component does not re render to show the latest consultation date.

However, I noticed that if I send each item in the consultations object to the child component like <ChildComponent date={this.props.consultation.date} /> it rerenders when the date changes!

Any idea why React does not re-render components when props sent as an object change?

I could always do with the work around but wondering if this is a bug or am I missing something?

Answer 1

The solution is to change consultation={consultation} to consultation={...consultation}. I am still unsure why, but it works!