Unable to update state in react - reactjs

Question

I want to update the the state on the basis of a condition.
Please refer to the code and point out the problem in either the logic or code.
class App extends Component {
constructor(props) {
super(props);
this.state = {
backImgIndex: 1
};
this.changeSlide = this.changeSlide.bind(this);
}
changeSlide() {
if (this.state.backImgIndex === 3) ({
this.setState = {
backImgIndex: 1
});
} else {
this.setState = ({
backImgIndex: this.state.backImgIndex + 1
});
}
}
render() {
const imageURL = '/backImg/b' + this.state.backImgIndex + '.jpg';
return (
<Fragment>
<BackgroundSlider backurl={imageURL} />
<div className="slider">
<div className="left-arrow" style={{}} onClick={this.changeSlide} />
</div>
</Fragment>
);
}
}
export default App;
Is there any other way to update the same.
The end goal is to update the state which trigger the update in the background image upon the press of .left arrow.
Can div be used for such an event ?

Answer 1

You are doing the update in the wrong way. setState is a function that should be called in order for updating the state. In fact, you are overriding such function:
this.setState = {
backImgIndex: 1
};
So, what you need is to call setState and pass in the part of the state you wanna update:
this.setState({ backImgIndex: 1 });
This works:
changeSlide() {
if (this.state.backImgIndex === 3) {
this.setState({
backImgIndex: 1
});
} else {
this.setState({
backImgIndex: this.state.backImgIndex + 1
});
}
}
Final code
class App extends Component {
constructor(props) {
super(props);
this.state = {
backImgIndex: 1
};
this.changeSlide = this.changeSlide.bind(this);
}
changeSlide() {
if (this.state.backImgIndex === 3) {
this.setState({
backImgIndex: 1
});
} else {
this.setState({
backImgIndex: this.state.backImgIndex + 1
});
}
}
render() {
const imageURL = '/backImg/b' + this.state.backImgIndex + '.jpg';
return (
<Fragment>
<BackgroundSlider backurl={imageURL} />
<div className="slider">
<div className="left-arrow" style={{}} onClick={this.changeSlide} />
</div>
</Fragment>
);
}
}

Answer 2

Wrong syntax in setState.
Plus, i would recommend preparing the new state before setting it:
changeSlide() {
let imgI=this.state.backImgIndex;
imgI=(imgI===3)?1:imgI+1;
this.setState({ backImgIndex: imgI});
}
Actually, a better option (because State Updates May Be Asynchronous):
changeSlide() {
this.setState((state,props)=>(state.backImgIndex===3?{ backImgIndex: 1}:{ backImgIndex: state.backImgIndex+1}));
}

Answer 3

First of all, I suggest you to use the ES6 syntax for more clarity :
class App extends Component {
constructor(props) {
super(props);
this.state = {
backImgIndex: 1
};
}
changeSlide = () => {
if (this.state.backImgIndex === 3) {
this.setState = ({
backImgIndex: 1
});
} else {
this.setState = ({
backImgIndex: this.state.backImgIndex + 1
});
}
}
render() {
const imageURL = `/backImg/b'${this.state.backImgIndex}.jpg`;
return (
<Fragment>
<BackgroundSlider backurl={imageURL} />
<div className="slider">
<div className="left-arrow" style={{}} onClick={this.changeSlide} />
</div>
</Fragment>
);
}
}
export default App;
I changed your function to an arrow function, and used the template string for your imageURL.
I think that the problem is in your setState. Can you please log the result of this.state.backImgIndex after updating the state ?
EDIT : As pointed out in the other comments, you're updating your state the wrong way. I corrected it in this example so you can have a clean example