Question: I have a React component that manage multiple accordion in a list, but when i update a children, on React dev tools, it was showing the updated text but on the view/ui, it doesnt update. Please advice.

```
var AccordionComponent = React.createClass({
  getInitialState: function() {
  var self = this;
  var accordions = this.props.children.map(function(accordion, i) {
   return clone(accordion, {
    onClick: self.handleClick,
    key: i
  });
});

  return {
    accordions: accordions
  }
},
handleClick: function(i) {
  var accordions = this.state.accordions;

  accordions = accordions.map(function(accordion) {
    if (!accordion.props.open && accordion.props.index === i) {
      accordion.props.open = true;
    } else {
      accordion.props.open = false;
    }
    return accordion;
  });

  this.setState({
    accordions: accordions
  });
},
componentWillReceiveProps: function(nextProps) {
  var accordions = this.state.accordions.map(function(accordion, i) {
    var newProp = nextProps.children[i].props;

    accordion.props = assign(accordion.props, {
      title: newProp.title,
      children: newProp.children
    });

    return accordion;
  });

  this.setState({
    accordions: accordions
  });
},
render: function() {
  return (
    <div>
      {this.state.accordions}
    </div>
  );
}

```

![enter image description here](https://i.stack.imgur.com/Ooblh.png)

![enter image description here](https://i.stack.imgur.com/pTVts.png)

Edit:  

The component did trigger `componentWillReceiveProps` event, but it still never get updated.

Thanks

Answer: 
After days of trying to solve this, I have came out with a solution. `componentWillReceiveProps` event was trigger when the component's props changes, so there was no problem on that. The problem was that the childrens of the `AccordionListComponent`, `AccordionComponent` was not updating its values/props/state.

Current solution: 

```
componentWillReceiveProps: function(nextProps) {
 var accordions = this.state.accordions.map(function(accordion, i) {
    // get current accordion key, and props value
    // update new props with old
    var newAc = clone(accordion, nextProps.children[i].props);

    // update current accordion with new props
    return React.addons.update(accordion, {
      $set: newAc
    });
  });

 this.setState({
   accordions: accordions
 });
}

```

I have tried to do only clone and reset the accordions, but apparently it did not update the component. 

Thanks
I usually handle this issue with below technique, its the solution if you are home-alone ;)

```
var _that = this;
this.setState({
   accordions: new Array()
 });
setTimeout(function(){
  _that.setState({
    accordions: accordions
  });
},5);

```