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?