Passing Variable to setState

Question

I am new to react. In my program, the user is asked to click on a button, and according to that button, the state is changed.

This is the rendered section:

<button onClick={this.togglePage(2)}>Click Here</button>

This is the part before:

  constructor(props) {
    super(props);
    this.togglePage = this.togglePage.bind(this);

    this.state = {
      currentpage: 1,
    };
  }
  togglePage(page) {
    this.setState({
      currentpage: page,
    });
  }

Is the way I am passing a value here correct? I am getting an error saying "Maximum Update Depth Exceeded"

Yury Tarabanko · Accepted Answer · 2019-03-20 07:38:21Z

2

You need to pass a function, not to call it immediatelly

 <button onClick={() => this.togglePage(2)}>Click Here</button>

As currently written you call togglePage in render which causes state update and rerender blowing the call stack.

answered Mar 20, 2019 at 7:38

Yury Tarabanko

45.1k10 gold badges88 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

DarkProfessor Over a year ago

Oh I see. this goes too even if I am not passing a value? something like a just toggle (true/false) function ?

Yury Tarabanko Over a year ago

@DarkProfessor If you call the function instead of passing it as a callback - then yes. onClick={fn} - ok onClick={fn()} - not ok unless fn returns a new function :)

Yury Tarabanko Over a year ago

This becomes redundant if you are using arrow functions in render. If you need to create multiple togglePage callbacks with different values you could rewrite your code by creating makePageToggler(currentpage){ return () => this.setState({ currentpage })} and the call it onClick={this.makePageToggler(2)}

Jolly Over a year ago

You don't. That statement, as the function name bind() suggests, is used to bind the name togglePage of the context this to the function togglePage you implemented. Though, you can write that function in this way: togglePage = (page) => { ... }, and you will not need nay binding

Yury Tarabanko Over a year ago

Notice in case of makePageToggler it is ok to make a call because it returns a new function.

|

Abhishek Gupta · Accepted Answer · 2021-08-03 17:48:56Z

0

one more approach would be to not bind it in constructor,instead bind it in the button tag as shown below,

<button onClick={this.togglePage.bind(this,2)}>Click Here</button>

answered Aug 3, 2021 at 17:48

Abhishek Gupta

11 silver badge2 bronze badges

Collectives™ on Stack Overflow

Passing Variable to setState

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related