Meteor react state passed to child component not updating

Question

On the parent component I am trying to pass down the state ( which are just images ) down to 2 child components. One of the child components just displays the images.

The other child component has an event handler to change one of the images. Here is my code I am getting no errors yet the image is not changing.. Thanks!

I am not including imports to cut down on code!

Parent component:

 export default class Parent extends React.Component{

    constructor(){
     super();   
         this.state = {
                 img1: <img id="img1" className="img-responsive center-block" name="img1" src="img1.png"/>,
                 img2: <img id="img2" className="img-responsive center-block" name="img2" src="" />
         };
    }



    render(){       
     return (  

            <div>

                            <displayBox layers={this.state}/>
                            <eventsBox layers={this.state}/>


            </div>


         ) 
    }
}

This is the display box component:

export default class AvatarCreationBox extends React.Component{


    render(){   


     return (                                           

                                    <div>
                                            {this.props.layers.img1}
                                            {this.props.layers.img2}
                                    </div>

         ) 
    }

}

Here is the other child component with the event handler:

It has this event handler that has been tested and works with a console.log at the end of it.

    itemClicked(itemId,event){
            event.stopPropagation();
            if(itemId === "img3"){
                    this.props.layers.img1 = <img className="media-object" src="img3.png" alt="..."/>;
                    console.log("yo");

            }
    }

Answer 1

You need to define a function which manipulates the state in your parent class and pass it as prop. Next step is to call the function with new image inside your event class.

Change your Parent Class to this

export default class Parent extends React.Component{

    constructor(){
     super();   
         this.state = {
                 img1: <img id="img1" className="img-responsive center-block" name="img1" src="img1.png"/>,
                 img2: <img id="img2" className="img-responsive center-block" name="img2" src="" />
         };

       this.changeImage = this. changeImage.bind(this)
    }

    changeImage(newImage){
        this.setState({img1: newImage});
    }

    render(){       
     return (  
            <div>
                <displayBox layers={this.state}/>
                <eventsBox 
                    layers={this.state}
                    callback={this.changeImage}/>
            </div>


         ) 
    }
}

and change event box code to following

itemClicked(itemId,event){
    event.stopPropagation();
    if(itemId === "img3"){
        this.props.callback('<img className="media-object" src="img3.png" alt="..."/>');
        console.log("yo");
    }
}

Update: React components using ES6 classes no longer autobind this to non React methods. In your constructor add

this.changeImage = this. changeImage.bind(this) in the constructor.