React component view does not get update

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>
  );
}

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

Thanks

Answer 1

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

Answer 2

I encountered a similar issue. So it may be relevant to report my solution here.

---

I had a graph that wasn't getting updated any time I hit just once the load data button (I could see visual changing after the second click).

The graph component was designed as a child of a parent component (connected to the Redux store) and data were passing therefore as a prop.

Issue: data were properly fetched from the store (in parent) but it seems the graph component (child) wasn't reacting to them.

Solution:

  componentWillReceiveProps(nextProps) {
     this.props = null;
     this.props = nextProps;
     // call any method here   
  }

Hope that might contribute in someway.