title: How to save old state values react
body: <p>I want to not loose my other states, when changing one in functional component. I know how to do it in class components, but how you do it in functional? Class component <code>this.setState({...this.state, somestate: somestate});</code></p>
  
  <p>My Functional component looks like this now:</p>
  
  <pre><code>const [product, setProduct] = useState({});
    let { id } = useParams();
  
    useEffect(() =&gt; {
      let productFromLocalStorage = localStorage[id];
      setProduct(JSON.parse(productFromLocalStorage));
    }, [id]);
  
  function handleName(event) {
      setProduct({name: event.target.value});
      // setName(event.target.value);
    }
  
  return (
      &lt;div style={styles.container}&gt;
        &lt;h1 style={styles.title}&gt;Product {product.name} Edit Page&lt;/h1&gt;
        &lt;form style={styles.form} onSubmit={handleSave}&gt;
          &lt;label style={styles.label}&gt;
            Name: &lt;input value={product.name} type="text" onChange={handleName}&gt;&lt;/input&gt;
          &lt;/label&gt;
          &lt;label style={styles.label}&gt;
            EAN: &lt;input value={product.ean} type="text" onChange={handleEan}&gt;&lt;/input&gt;
          &lt;/label&gt;
          &lt;label style={styles.label}&gt;
            Type: &lt;input value={product.type} type="text" onChange={handleType}&gt;&lt;/input&gt;
          &lt;/label&gt;
          &lt;label style={styles.label}&gt;
            Weight:{' '}
            &lt;input value={product.weight} type="text" onChange={handleWeight}&gt;&lt;/input&gt;
          &lt;/label&gt;
          &lt;label style={styles.label}&gt;
            Color:{' '}
            &lt;input value={product.color} type="text" onChange={handleColor}&gt;&lt;/input&gt;
          &lt;/label&gt;
          &lt;label style={styles.label}&gt;
            Active:{' '}
            &lt;input value={product.active} type="checkbox" onChange={handleActive}&gt;&lt;/input&gt;
          &lt;/label&gt;
  
          &lt;input style={styles.submitButton} type="submit" value="SAVE"&gt;&lt;/input&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    );
  function handleSave(event) {
      const productInfo = {
        name: product.name,
        ean: product.ean,
        type: product.type,
        weight: product.weight,
        color: product.color,
        active: product.active,
      };
      localStorage.setItem(id, JSON.stringify(productInfo));
      alert('Product: ' + name + ' edited!');
    }
  </code></pre>
  
  <p>my product state has other params like weight and etc... when I am setting setProduct({name: event.target.value}); other values gets empty. How to solve it?</p>