componentWillMount warning on function that setState

Question

I have a simple clear button in my render method

<Button onClick={this.clearFilters(data)}> CLEAR </Button>

that calls function that clears out a state

  clearFilters(data){
   if (!data || !this.state) {
     return;
   }

   const blankFilter = '';
    this.setState({
      filter: blankFilter });
}

But if I add the setState line I got a ton of warnings and it pretty well freezes up.

Warning: Cannot update during an existing state transition (such as within render or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to componentWillMount

How can I implement this in componentWillMount?

this is because of the infinite loop, onClick expect a function, use this: `onClick={() => this.clearFilters(data)}` — Mayank Shukla, Jan 20 '18 at 08:23

score 1 · Accepted Answer · answered Jan 20 '18 at 08:23

1

I would suggest you change this <Button onClick={this.clearFilters(data)}> CLEAR </Button> to <Button onClick={()=>{this.clearFilters(data)}}> CLEAR </Button>. I think your button onClick method is trying to execute the clearFilters function when it's rendering thus the error

answered Jan 20 '18 at 08:23

E_K

2,159
23
39

Yes....that fixed it. Thanks – EvilEddie Jan 20 '18 at 08:25
@EvilEddie please accept it as an answer then – E_K Jan 20 '18 at 08:27

score 0 · Answer 2 · answered Jan 20 '18 at 08:25

this.clearFilter(data) is being executed immediately; it's a function call. It's not happening when the user clicks.

Change it to <Button onClick={() => this.clearFilters(data)}> CLEAR </Button>

Furthermore, why are you wanting to do this in componentWillMount? Why not just set the state initially to what it is supposed to be? Something like...

constructor(props) {
  super(props);
  this.state = { ... };
}

Good luck!

componentWillMount warning on function that setState

2 Answers2