Array of components in react does not render properly when updated

Question

I am trying to build a component containing an array of components in react, giving a new size to each component in array according to total number of elements. However the view does not update all the components. Only newly added component is updated with size even though i rebuild the array each time.

class StampArea extends React.Component{
constructor(props){
    super(props);
    this.state = {updateView: true};
    this.getStampSize = this.getStampSize.bind(this);
    this.prepareStamps = this.prepareStamps.bind(this);
    this.balance = 1;

}

prepareStamps(fulfill){
    var stamps = [];
    console.log('stamps: ', stamps);
    for (var i = 1; i <= fulfill; i++) { 
        if(i<=this.balance){
            stamps.push(<Stamp key={i} stampSize={this.getStampSize(fulfill)} stamped={true} stampBackgroundImage={this.props.stampBackgroundImage} stampPunchImage={this.props.stampPunchImage}/>);
        }else{
            stamps.push(<Stamp key={i} stampSize={this.getStampSize(fulfill)} stamped={false} stampBackgroundImage={this.props.stampBackgroundImage} stampPunchImage={this.props.stampPunchImage}/>);   
        }
    }
    console.log('stamps: ', stamps);
    return(stamps);
}

getStampSize(fulfill){
    if(fulfill >= 20){return 10}
    if(fulfill >= 15){return 20}
    if(fulfill >= 10){return 50}
    if(fulfill >= 8 ){return 35}
    if(fulfill >= 5 ){return 40}
    if(fulfill >= 4 ){return 60}
    if(fulfill >= 1 ){return 80}
}

render(){
    return( <div style={styles.stampsContainer}>{this.prepareStamps(this.props.fulfill)}</div>);
}

}

class Stamp extends React.Component{
constructor(props){
    super(props);
    this.stamp=null;
    this.buildStamp=this.buildStamp.bind(this);
    this.buildStamp();
}

buildStamp(){
    // Assigning correct stylesheet to build the stamp as asked. 
        if(this.props.stamped){
            this.punched = (<img style={{position:'absolute',height:this.props.stampSize, width:this.props.stampSize, resizeMode:'contain'}} src={this.props.stampPunchImage}/>);
        }else{
            this.punched = null;
        }
            console.log('stampsize inside, ', this.props.stampSize);
            this.backgroundImage = (<img style={{position:'absolute',height:this.props.stampSize, width:this.props.stampSize, resizeMode:'contain'}} src={this.props.stampBackgroundImage}/>);
            this.stamp = (<div style={{position:'relative', margin:5,height:this.props.stampSize, width:this.props.stampSize}}>{this.backgroundImage}{this.punched}</div>);       
}
render(){
    return(this.stamp);
}
}

And here are some pics to explain better,

The initial state always renders correct

This is how it looks when i update the component via props

Additionally when i check the array object, i see size props are set with correct value but somehow it doesn't render properly.

How can i solve this?

r0dney · Accepted Answer · 2016-07-22 19:55:05Z

1

This is because your render method just returns this.stamp which is generated only once inside the constructor. Instead of calling buildStamp inside a constructor, just move it inside render method and you should be fine.

answered Jul 22, 2016 at 19:55

r0dney

7452 gold badges6 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Taata Over a year ago

Thanks a lot! it works. I can't understand one thing. Doesn't constructor run every time i push a stamp into array? Or am i missing something.

r0dney Over a year ago

@Taata It only runs once when the component is instantiated. It is the componentWillUpdate that gets executed every time the state/props changes. You can checkout the docs at facebook.github.io/react/docs/…

Diogo Cunha Over a year ago

No, the constructor and componentDidMount only run once. You only create the object once, it just re-renders after that.

Collectives™ on Stack Overflow

Array of components in react does not render properly when updated

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related