CODEWITHSUNDEEP
javascriptnode.jsreactjs
eugene
eugene

Reputation: 658

React component view does not get update

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

enter image description here

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

Thanks

Upvotes: 9

Views: 6784

Answers (3)

Suhail Mumtaz Awan
Suhail Mumtaz Awan

Reputation: 3483

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

Upvotes: 0

andrixb
andrixb

Reputation: 121

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.

Upvotes: 2

eugene
eugene

Reputation: 658

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

Upvotes: 5

Related Questions