Refactoring Function in React with Parameters
<p>I have checkboxes which do similar things. </p>

<p>Functions:</p>

<pre><code>constructor(props) {
   super(props);
    this.state = { 
       Dog:false,
       Cat:false,
       Fish:true,
       clickedAnimal:true 
    };
   this.checkCat = this.checkCat.bind(this);
   this.checkDog = this.checkDog.bind(this);
   this.checkFish = this.checkFish.bind(this);
 }

 checkCat(){
   this.setState({Cat: !this.state.Cat});   
 }
 checkDog(){
   this.setState({Dog: !this.state.Dog});   
 }
 checkFish(){
   this.setState({Fish: !this.state.Fish});   
 }
</code></pre>

<p>Checkboxes:</p>

<pre><code>{this.state.clickedAnimal ? 
  &lt;div className="animal-filter"&gt;

    &lt;p&gt;&lt;input type="checkbox" checked={this.state.Cat} onChange=  {this.checkCat)} /&gt; Cat &lt;/p&gt;

    &lt;p&gt;&lt;input type="checkbox" checked={this.state.Dog} onChange={this.checkDog} /&gt; Dog&lt;/p&gt;

    &lt;p&gt;&lt;input type="checkbox" checked={this.state.Fish} onChange={this.checkFish} /&gt; Fish&lt;/p&gt;

  &lt;/div&gt; : null}
</code></pre>

<p>I want to refactor this into 1 function and feed it with a parameter: checkAnimal(animal)</p>

<p>However, I keep getting errors when I do something like this: </p>

<pre><code>  &lt;input type="checkbox" checked={this.state.Fish} onChange={this.checkAnimal(Animal)} /&gt; Fish
</code></pre>

<p>Is there a way to pass a parameter through a function in a checkbox tag like this?</p>

<p>--EDIT</p>

<p>This is the error I keep getting if I add a parameter to checkAnimal:</p>

<p>Cannot update during an existing state transition (such as within <code>render</code>). Render methods should be a pure function of props. </p>