React setState doesnt update state while changing an image

Question

In a product detail page I got a big picture of an item and a few small pictures inside a carousel. I 'm tryin to replace the big picture with the small ones if they get clicked.

    constructor() {
    super();
    this.state = {
        zoomProps: {
            width: 400,
            zoomWidth:500,
            scale:1.5,
            img:'assets/images/products/14.jpg',
            offset: {vertical: 0, horizontal: 10},
        }
    }
}

handleClick(i){
    this.setState({
        zoomProps:{
            img: i,
        }
    });
}

I'm using zoomProps state like this and it works fine;

<div  style={{display: 'flex', marginBottom: 10}}>
      <ReactImageZoom  {...this.state.zoomProps}  />
</div>

And I'm tryin to setState zoomProps img's address like this;

 <a className="horizontal-thumb active" onClick={this.handleClick.bind(null,`'assets/images/products/17.jpg'`)} >
 <img  className="img-responsive" width="85" alt="None" src="assets/images/products/5.jpg" data-echo="assets/images/products/17.jpg" />
</a>

But it gives me this error;

    TypeError: Cannot read property 'setState' of nullhandleClick
C:/Users/kalen/WebstormProjects/emlakui/src/components/detail/detail_partials/content.js:20
  17 |    }
  18 | 
  19 |    handleClick(i){
> 20 |        this.setState({
  21 |            zoomProps:{
  22 |                img: i,
  23 |            }

If console.log(i) in handleClick function that I see it's passing the correct data but for some reason zoomProps' img state doesn't get updated. Can anyone please show me the correct way to this right? Another question : Do I have to use redux and create some actions for it ?

Edit: In the other read property 'setState' of undefined answer doesnt include

onClick={this.handleClick.bind(this,'assets/images/products/17.jpg')} . I was tryin to send data like this so these are similar but different questions I think.

Vivek Doshi · Accepted Answer · 2017-11-02T08:06:24.557

0

You are passing the context of handleClick as null , that should be this , means ref to current component.

Change this :

this.handleClick.bind(null,`'assets/images/products/17.jpg'`)

to

this.handleClick.bind(this,'assets/images/products/17.jpg')

edited Nov 02 '17 at 08:06

answered Nov 02 '17 at 07:52

Vivek Doshi

56,649
12
110
122

I changed to this.handleClick.bind(this,`'assets/images/products/17.jpg'`) and now if I click the small pic, big pic disappears. I think I'm making some other mistakes here too.. – Ibrahim Avci Nov 02 '17 at 08:03
please check updated answer , remove ` from image url – Vivek Doshi Nov 02 '17 at 08:06

React setState doesnt update state while changing an image

1 Answers1