I have a type product
within a React component:
type TProduct = {
name: string,
price: string,
stock: string
}
in which my component I wish to change the values through a input box:
const AddProductCard: React.SFC = () => {
const classes = useStyles();
const [product, setProduct] = React.useState({ product:{} as TProduct})
return (
<input
onChange={e => setProduct({...product ,product: {name: e.target.value }})}
/>
<input
onChange={e => setProduct({...product ,product: {stock: e.target.value }})}
/>
<input
onChange={e => setProduct({...product ,product: {price: e.target.value }})}
/>
)
}
I thought by adding ...product
it would copy over all the same values within product
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.
I then attempted a different approach with an interface where:
interface IProduct {
name: string;
price: string;
stock: string;
}
and
const [product, setProduct] = React.useState<IProduct | undefined>(undefined);
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).