Next and previous buttons not working properly - reactjs

Question

I am building a react app which renders differnet components on pressing the next and back buttons. The problem i am facing is that the both these buttons are reacting to the previous button press. Like if a first press next then nothing will happen. If then i press back then it is responding to the previous button press of next.
class Card extends Component {
constructor()
{
super();
this.state = {
button:"",
i:0
}
}
onClick = (event)=>{
this.setState({button: event.target.id})
if(this.state.button==="1")
{
this.setState({ i: this.state.i + 1 });
}
else if(this.state.button==="2")
{
this.setState({ i: this.state.i - 1 });
}
console.log(this.state.i)
}
render() {
return(
<div className="App">
<div >
<NavBar onButtonClick={this.onClick}/>
<CardList i={this.state.i} />
</div>
</div>
);
}
}
export default Card;

Answer 1

setState in React is batched by React, essentially it means, if you do 3 set state calls one after the other, they are all called sequentially.
I recommend reading the official docs for more details.
Now, on to your problem: you are setting a state based on the "previous value" in that state:
this.setState({ i: this.state.i - 1 });
This will cause "unexpected" behaviour due to the batched mode, as the this.state.i could've changed at the time it is actually called.
Here is what React docs recommend to do:
setState() does not always immediately update the component. It may
batch or defer the update until later. This makes reading this.state
right after calling setState() a potential pitfall. Instead, use
componentDidUpdate or a setState callback (setState(updater,
callback))
There is a second signature for setState method, which accepts a function with the signature: (state, props) => stateChange where props is optional, if you don't want to use it, no need to pass it.
The common mistake you seem to be doing is reading this.state after calling this.setState, this will not work.
The code below is not perfect, but hopefully shows, what you need to correct.
onClick = (event)=>{
var buttonId = event.target.id;
if(buttonId==="1")
{
this.setState((state) => {
return { i: state.i + 1, button: 1 }
});
}
else if(buttonId==="2")
{
this.setState((state) => {
return { i: state.i - 1, button: 2 }
});
}
}
Additional reading: If you still need to understand how to use functions in setState, I can recommend this article: https://medium.freecodecamp.org/functional-setstate-is-the-future-of-react-374f30401b6b

Answer 2

this.setState takes a little bit of time to update the entire state, so you cannot reliably execute this.setState({button: event.target.id}) and then immediately afterward check the this.state.button - it's likely that the state hasn't finished being set yet.
Instead, I'd recommend setting your conditional based on the event.target.id, like this:
if (event.target.id === "1") {
this.setState({ i: this.state.i + 1 });
} else if (event.target.id === "2") {
this.setState({ i: this.state.i - 1 });
}
I would wait until the top of your render method to console.log your state for debugging purposes, as it will have completed being updated by then.
For more information on how to use setState properly, you can see this article, especially the section entitled "State Updates May Be Asynchronous".