Hi people!
I have a component that passes state down to one child to be shown on screen and passes down a function to another child so that child can make changes which will update the state of the parent and thus update the state that was passed down to the first child.
My issue is when the function is called from child 2 which is up on the parent I get the error:
Uncaught TypeError: Cannot set property ‘layer2’ of undefined
Parent:
constructor(){
super();
this.state = {
layer1: <img id="layer1" className="img-responsive center-block" src="1.png" />,
layer2: <img id="layer2" className="img-responsive center-block" src="2.png" />,
layer3: <img id="layer3" className="img-responsive center-block" " src="3.png" />
};
}
renderView(layer){
if(layer === "layer2"){
this.state.layer2 = <img id="layer1" className="img-responsive center-block" src="4.png" />;
}
}
I have done a console.log so I know this function is getting called.
This is how I pass it into the child component from the parent:
<ChildContainer renderView={this.renderView}/>
Within the child when a button is clicked this happens:
this.props.renderView("layer2");
Thanks for the help I am very new to this!
UPDATE:
In the constructor of the parent I have done:
this.renderView = this.renderView.bind(this);
this now lets the renderView be called without error. The issue is it does nothing.
I have put a console.log before and after the this.state.eyesLayer part of the function and they both show.