How to save old state values react - reactjs

Question

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 this.setState({...this.state, somestate: somestate});
My Functional component looks like this now:
const [product, setProduct] = useState({});
let { id } = useParams();
useEffect(() => {
let productFromLocalStorage = localStorage[id];
setProduct(JSON.parse(productFromLocalStorage));
}, [id]);
function handleName(event) {
setProduct({name: event.target.value});
// setName(event.target.value);
}
return (
<div style={styles.container}>
<h1 style={styles.title}>Product {product.name} Edit Page</h1>
<form style={styles.form} onSubmit={handleSave}>
<label style={styles.label}>
Name: <input value={product.name} type="text" onChange={handleName}></input>
</label>
<label style={styles.label}>
EAN: <input value={product.ean} type="text" onChange={handleEan}></input>
</label>
<label style={styles.label}>
Type: <input value={product.type} type="text" onChange={handleType}></input>
</label>
<label style={styles.label}>
Weight:{' '}
<input value={product.weight} type="text" onChange={handleWeight}></input>
</label>
<label style={styles.label}>
Color:{' '}
<input value={product.color} type="text" onChange={handleColor}></input>
</label>
<label style={styles.label}>
Active:{' '}
<input value={product.active} type="checkbox" onChange={handleActive}></input>
</label>
<input style={styles.submitButton} type="submit" value="SAVE"></input>
</form>
</div>
);
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!');
}
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?

Answer 1

what you are doing is overriding so like you said you need to keep current values so do this:
setProduct({...product, name: event.target.value})

Answer 2

You can do the same via useState() also,
const [product, setProduct] = useState({});
someHandler=(event)=>(
setProduct(product=>{
...product,
name:event.target.value
});
)