title: How do I create a new JSON object inside a react hook?
body: <p>I have two issues first how do I add/update the JSON items within a hook?
  The other being that React won't let me use the name stored from a previous JSON file.</p>
  <p>I am open to other solutions, basically, as my input field are dynamically generated from a JSON file I'm unsure of the best way to store or access the data that's input into them I think storing them in a react hook as JSON and then passing them though as props to another component is probably best.</p>
  <p>What I want to happen is onChange I would like the quantity value to be stored as a JSON object in a Hook here's my code:</p>
  <p><strong>React:</strong></p>
  <pre><code>import React, { useState, useEffect } from 'react';
  import Data from '../shoppingData/Ingredients';
  import Quantities from '../shoppingData/Quantities';
  
  const ShoppingPageOne = (props) =&gt; {
    //element displays
    const [pageone_show, setPageone_show] = useState('pageOne');
  
    //where I want to store the JSON data
    const [Quantities, setQuantities] = useState({});
  
    useEffect(() =&gt; {
      //sets info text using Json
      if (props.showOne) {
        setPageone_show('pageOne');
      } else {
        setPageone_show('pageOne hide');
      }
    }, [props.showOne]);
  
    return (
      &lt;div className={'Shopping_Content ' + pageone_show}&gt;
        //generates input fields from JSON data
        {Data.map((Ingredients) =&gt; {
          const handleChange = (event) =&gt; {
            // this is where I'd like the Hook to be updated to contain instances of the ingredients name and quantity of each
            setQuantities(
              (Ingredients.Name: { ['quantities']: event.target.value })
            );
  
            console.log(Quantities);
          };
  
          return (
            &lt;div className=&quot;Shopping_input&quot; key={Ingredients.Name}&gt;
              &lt;p&gt;
                {Ingredients.Name} £{Ingredients.Price}
              &lt;/p&gt;
              &lt;input
                onChange={handleChange.bind(this)}
                min=&quot;0&quot;
                type=&quot;number&quot;
              &gt;&lt;/input&gt;
            &lt;/div&gt;
          );
        })}
        &lt;div className=&quot;Shopping_Buttons&quot;&gt;
          &lt;p onClick={props.next_ClickHandler}&gt;Buy Now!&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default ShoppingPageOne;
  </code></pre>
  <p><strong>JSON file:</strong></p>
  <pre><code>//Json data for the shopping ingredients
  
  export default [
      {
          Name: 'Bread',
          Price: &quot;1.10&quot;,
      },
  
      {
          Name: 'Milk',
          Price: &quot;0.50&quot;,
      },
  
      {
          Name: 'Cheese',
          Price: &quot;0.90&quot;,
      },
  
      {
          Name: 'Soup',
          Price: &quot;0.60&quot;,
      },
  
      {
          Name: 'Butter',
          Price: &quot;1.20&quot;,
      }
  ]
  </code></pre>