title: Change value of object property with checkbox React
body: <p>I am pretty new to react and got really stuck on something. I am working on a sort of ordering application. People can order a product and can select all ingredients they want. I was thinking to do this with a checkbox for each ingredient. Unfort. I just don't know how to get this fixed. Also, I am wondering if I have to use a state in my component or just a variable.</p>
  
  <p>So I am mapping through the array of ingredients and for each ingredient I am displaying a checkbox to turn on/off an ingredient. So my main question, How can I adjust my object with these checkboxes, and if I need to have a state in my component to keep up to date with the checkboxes, How will I set the product to my state? Because It's coming from props.</p>
  
  <p>I've tried all sort of things, for instance this from the docs:</p>
  
  <pre><code>  constructor(props) {
      super(props);
      this.state = {
        isGoing: true,
        numberOfGuests: 2
      };
  
      this.handleInputChange = this.handleInputChange.bind(this);
    }
  
    handleInputChange(event) {
      const target = event.target;
      const value = target.type === 'checkbox' ? target.checked : target.value;
      const name = target.name;
  
      this.setState({
        [name]: value
      });
    }
  </code></pre>
  
  <p>But then again, How can I add the product to my state? Also, this will be different since the ingredients are in a object, and the example from the docs are just values and not in a specific object.</p>
  
  <p>My component</p>
  
  <pre><code>import React from 'react';
  import { Link } from 'react-router-dom';
  
  class Order extends React.Component {
  
      constructor(props) {
          super(props);
      }
  
      handleToggle(e) {
  
          //Handle the toggle, set the value of the ingredient to 0 or 1
  
      }
  
      getData(e, product) {
  
          e.preventDefault();
  
          console.log(product)
  
      }
  
      render() {
  
          const product = this.props.products.find((product) =&gt; {
              return product.id == this.props.match.params.id;
          });
  
          return (
  
              &lt;form className="container mx-auto px-4 pt-6" onSubmit={(e) =&gt; this.getData(e, product) }&gt;
  
                  &lt;Link to={`/${this.props.match.params.category}`} className="mb-4 relative block text-brand hover:text-brand-dark"&gt;&amp;larr; Terug naar categorie&lt;/Link&gt;
  
                  &lt;div className="flex flex-row items-center justify-between bg-white rounded px-8 py-8 shadow-sm mb-4"&gt;
  
                      &lt;div className=""&gt;
                          &lt;h2 className="text-brand uppercase"&gt;{product &amp;&amp; product.name}&lt;/h2&gt;
                          &lt;div className="ingre"&gt;
                              &lt;p&gt;
                                  {product &amp;&amp; product.ingredients.map((item) =&gt; {
                                      return &lt;span className="ing text-grey-dark text-sm" key={item.name}&gt;{item.name}&lt;/span&gt;
                                  })}
                              &lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
  
                      &lt;div className=""&gt;
                          &lt;h3 className="text-brand text-4xl"&gt;&amp;euro;{product &amp;&amp; product.price}&lt;/h3&gt;
                      &lt;/div&gt;
  
                  &lt;/div&gt;
  
                  &lt;div className="flex flex-wrap mb-4 -mx-2"&gt;
  
                      {product &amp;&amp; product.ingredients.map((item) =&gt; {
                          return (
                              &lt;div className="w-1/2 mb-4 px-2" key={item.name}&gt;
                                  &lt;div className="flex flex-row items-center justify-between bg-white rounded px-8 py-8 shadow-sm"&gt;
                                      &lt;div&gt;
                                          &lt;h3 className="text-grey-dark font-normal text-sm"&gt;{item.name}&lt;/h3&gt;
                                      &lt;/div&gt;
                                      &lt;div&gt;
                                          &lt;input type="checkbox" checked={item.value} name={item} onChange={(e) =&gt; this.handleToggle(e)}/&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          );
                      })}
  
                  &lt;/div&gt;
  
                  &lt;button type="submit" className="bg-brand hover:bg-brand-dark text-white font-bold py-4 px-4 rounded"&gt;
                      Order this product
              &lt;/button&gt;
  
              &lt;/form&gt;
  
          );
  
      }
  
  }
  
  export default Order;
  </code></pre>
  
  <p>An example of a product</p>
  
  <p><a href="https://i.stack.imgur.com/bYeYG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bYeYG.png" alt="enter image description here"></a></p>
  
  <p>So actually I need to keep track of the product and bind the value's of the ingredients to the checkbox. If it's not checked the value must become 0 (or false).</p>
  
  <p>Edit:</p>
  
  <p>Parent component passing props</p>
  
  <pre><code>// React deps
  import React, { Component } from 'react';
  import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
  
  // Custom components
  import Navigation from './components/General/Navigation'
  
  // Pages
  import Index from './components/Index'
  import Category from './components/Category'
  import Order from './components/Order'
  
  // Data
  import products from './Data'
  
  class App extends Component {
  
    constructor(props) {
  
      super(props);
  
      this.state = {
        products: []
      }
  
    }
  
    componentWillMount() {
  
      setTimeout(() =&gt; {
        this.setState({products});
      }, 100);
  
    }
  
    render() {
      return (
        &lt;main className="App font-sans"&gt;
          &lt;Router&gt;
            &lt;div&gt;
  
              &lt;Navigation logo="Jackies" /&gt;
              &lt;Switch&gt;
                &lt;Route exact path="/" component={Index} /&gt;
                &lt;Route exact path="/:category" render={(props) =&gt; &lt;Category {...props} products={this.state.products} /&gt;}/&gt;
                &lt;Route exact path="/:category/:id" render={(props) =&gt; &lt;Order {...props} products={this.state.products} /&gt;}/&gt;
              &lt;/Switch&gt;
  
            &lt;/div&gt;
          &lt;/Router&gt;
  
        &lt;/main&gt;
      );
    }
  }
  
  export default App;
  </code></pre>