React: [object Object] passed through select/option value

Question

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!

Answer 1

because you're using html instead of a library-supplied component, you have to accept that the value prop has to be a string, so <option value={product} is converting the product to a string, [Object object] first.

You should use the product.id instead, and adjust your handleChange on the containing select to take that into account.