title: React setState: using checkbox to change boolean value
body: <p>React beginner here. Checked through similar topics and haven't found the answer. I am building a page where you create items and update information. But right now I'm struggling with a simple checkbox. When it's checked, the active state should change to true and vice versa. However, when I click, the stat doesn't change. I've checked with console log and the function works fine, tried using prevState and simple setState active:true, but I still can't change it. I'm probably missing something obvious, so thanks in advance if you can point it out.</p>
  
  <p>The App Code</p>
  
  <pre><code>import React from 'react';
  import './App.css';
  import ProductList from "../ProductList/ProductList";
  import NewProd from "../NewProd/NewProd";
  
  class App extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
              name: "", 
              ean: "", 
              type: "", 
              weight: "", 
              color: "", 
              active: null,
              products: [{name: "Cabbage", ean: "00000000", type: "Vegetable", weight: "2kg", color: "Green", active: false}, 
              {name: "Banana", ean: "111111111", type: "Fruit", weight: "0.3kg", color: "Yellow", active: false}, 
              {name: "Chocolate", ean: "22222222222", type: "Candy", weight: "0.2kg", color: "Brown", active: false}, 
              {name: "Orange", ean: "3333333333", type: "Fruit", weight: "0.5kg", color: "Orange", active: false}, 
              {name: "Cucumber", ean: "4444444444", type: "Vegetable", weight: "1kg", color: "Green", active: false}, ]
      };
      this.isActive = this.isActive.bind(this);
  };
  
  handleFormSubmit = (e) =&gt; {
    e.preventDefault();
    let products = [...this.state.products];
  
    products.push({
        name: this.state.name,
        ean: this.state.ean,
        type: this.state.type,
        weight: this.state.weight,
        color: this.state.color,
        active: false,
    });
    this.setState({ products, name: "", ean: "", type: "", weight: "", color: "", active: false}
    );
  }
  handleInputChange = (e) =&gt; {
    let input = e.target;
    let name = e.target.name;
    let value = input.value;
    this.setState({[name]: value})
    };
  
  deleteProduct = (delIndex) =&gt; {
    let products = [...this.state.products].filter((product, index) =&gt; index !== delIndex);
    this.setState({ products });
  };
  isActive = () =&gt; {
    this.setState({active: !this.state.active})
  }
  render() {
    return (
      &lt;div className="App"&gt;
        &lt;ProductList products={this.state.products} 
        deleteProduct={this.deleteProduct}
        isActive={this.isActive} /&gt;
        &lt;NewProd handleFormSubmit={this.handleFormSubmit}
        handleInputChange={this.handleInputChange}
        newName={this.state.name}
        newEan={this.state.ean}
        newType={this.state.type}
        newWeight={this.state.weight}
        newColor={this.state.color} /&gt;
      &lt;/div&gt;
    );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>The List Code</p>
  
  <pre><code>import React from "react";
  import "./ProductList.css";
  
  class ProductList extends React.Component {
      render() { 
          const products = this.props.products;
          return (
              &lt;div&gt;
                  &lt;h1&gt;Product List&lt;/h1&gt;
                  &lt;table&gt;
                      &lt;tr&gt;
                          &lt;th&gt;Name&lt;/th&gt;
                          &lt;th&gt;EAN Code&lt;/th&gt;
                          &lt;th&gt;Type&lt;/th&gt;
                          &lt;th&gt;Weight&lt;/th&gt;
                          &lt;th&gt;Color&lt;/th&gt;
                          &lt;th&gt;Active&lt;/th&gt;
                      &lt;/tr&gt;
                      {products.map((product, index) =&gt; {
                          return (
                              &lt;tr key={index}&gt;
                                  &lt;td&gt;{product.name}&lt;/td&gt;
                                  &lt;td&gt;{product.ean}&lt;/td&gt;
                                  &lt;td&gt;{product.type}&lt;/td&gt;
                                  &lt;td&gt;{product.weight}&lt;/td&gt;
                                  &lt;td&gt;{product.color}&lt;/td&gt;
                                  &lt;td&gt;&lt;input type="checkbox" onChange={this.props.isActive} /&gt;&lt;/td&gt;
                                  &lt;td&gt;&lt;button&gt;View&lt;/button&gt;&lt;/td&gt;
                                  &lt;td&gt;&lt;button&gt;Edit&lt;/button&gt;&lt;/td&gt;
                                  &lt;td&gt;&lt;button onClick={() =&gt; this.props.deleteProduct(index)}&gt;Delete&lt;/button&gt;&lt;/td&gt;
                              &lt;/tr&gt;
                          )
                      })}
                  &lt;/table&gt;
              &lt;/div&gt;
          )
      }
  }
  export default ProductList;
  </code></pre>