I'm trying to pass an object that I'm mapping through a combo-box but it passes value of [object Object] instead of the real object. If I console log the object instead of rendering it, it shows the right object but doesn't pass the value through options.
import React,{useState} from 'react';
import {TextField, Button} from '@material-ui/core'
const OrderForm = props => {
const [products, setProducts] = useState([])
// const [id, setId] = useState('')
const [name, setName] = useState('')
const [qty, setQty] = useState('')
const showProducts = () => {
console.log(products)
}
const handleSubmit = event => {
event.preventDefault();
setProducts(prev => [
...prev,
{
id: event.id,
name: event.name,
qty: event.qty
}
])
}
const handleChange = product => {
console.log(product)
setProducts(prevProduct => [
...prevProduct,
product
])
}
return (
<div>
<form onSubmit={handleSubmit}>
<select
onChange={e => handleChange(e.target.value)}
>
{
props.allProducts.map(product => (
<option value={product} key={product._id}>{product.name}</option>
))
}
</select>
<TextField
variant='standard'
color='secondary'
type='text'
label='Product Name'
value={name}
onChange={e => setName(e.target.value)}
/>
<TextField
variant='standard'
color='secondary'
type='text'
label='Product Quantity'
value={qty}
onChange={e => setQty(e.target.value)}
/>
<Button
variant='contained'
size='large'
type='submit'
color='secondary'
>Place Order</Button>
</form>
<Button
variant='contained'
size='large'
onClick={showProducts}
color='secondary'
>Show Products Array []</Button>
</div>
)
}
export default OrderForm;
Interestingly it works perfectly with material-ui:
<Select
style={{width:"120px"}}
value={products}
onChange={e => handleChange(e.target.value)}
>
{
theProducts.map(product => (
<MenuItem key={product._id} value={product}> {product.name} </MenuItem>
))
}
</Select>
Any help would be appreciated!
