trying to pass an ID to form value using form select while showing an object name instead

Question

Select product category

                <select placeholder='product category'
                name="product_category_id"
                value={formInput.product_category_id
                }
                onChange={handleFormInput}>
                    {categories.map((category) =>(
                        <option>{category.name}</option>
                    ))}


                </select>
                </label>
            </div>

i have tried to use switch case to return the category.id when i select category.name instead. but it looks quite messy

Answer 1

The value attribute is part of the option tag. Have you tried to add it there like this:

<select placeholder='product category'
        name="product_category_id"
        onChange={handleFormInput}>
          {categories.map((category) =>(
            <option value={category.id}>{category.name}</option>
          ))}
</select>