title: react and typescript useState on a object
body: <p>I have a type <code>product</code> within a React component:</p>
  
  <pre><code>type TProduct = {
    name: string,
    price: string,
    stock: string
  }
  </code></pre>
  
  <p>in which my component I wish to change the values through a input box:</p>
  
  <pre><code>const AddProductCard: React.SFC = () =&gt; {
    const classes = useStyles();
    const [product, setProduct] = React.useState({ product:{} as TProduct})
    return (
       &lt;input 
        onChange={e =&gt; setProduct({...product ,product: {name: e.target.value }})}
       /&gt;
       &lt;input 
        onChange={e =&gt; setProduct({...product ,product: {stock: e.target.value }})}
       /&gt;
       &lt;input 
        onChange={e =&gt; setProduct({...product ,product: {price: e.target.value }})}
       /&gt;
      )
    }
  </code></pre>
  
  <p>I thought by adding <code>...product</code> it would copy over all the same values within <code>product</code> and just change the value I wanted to but that didn't seem to work. It would set a new product object although it would just rewrite the whole content of the object with the only the most recent entered input. </p>
  
  <p>I then attempted a different approach with an interface where:</p>
  
  <pre><code>interface IProduct {
    name: string;
    price:  string;
    stock: string;
  }
  </code></pre>
  
  <p>and </p>
  
  <p><code>const [product, setProduct] = React.useState&lt;IProduct | undefined&gt;(undefined);</code></p>
  
  <p>and using a similar state change as I have shown previously, but alas that only occurred in another new bug (I guess I'm not sure how to properly use an interface in react). </p>