Necesito editar productos que ya contienen un tipo de categoría, pero cuando recibo los datos para editar, uso useState para configurar los datos de la categoría y mostrarlos en una selección donde el usuario puede cambiar la categoría.

Simplemente recibo de mi contexto las categorías y la categoría que ya tiene asignando el producto de esta manera:

 const [categoryState, setCategoryState] = useState() useEffect(() => { getCategories() getProduct(params.id) if(product?._id) { setFiles(product.img) setCategoryState(product.category.name) // OK Product Category } }, [])

Posteriormente en mi selección intento mostrar la categoría a la que pertenece el producto además de las demás categorías de esta manera:

 <select {...register('category')} className="border-solid border-2 border-slate-200 w-full p-2" value={categoryState} onChange={ e => handleChange(e.target.value)} > { categories.docs.map( data => ( <option key={data._id} value={data._id}> { data.name } </option> ))} </select>

El código anterior solo me muestra las categorías disponibles pero nunca muestra la categoría que tiene el producto registrado ya seleccionado.

Si hago el cambio del valor por el nombre, en efecto, me muestra correctamente el nombre de la categoría que tiene el producto, quedando así:

 <select {...register('category')} className="border-solid border-2 border-slate-200 w-full p-2" value={categoryState} onChange={ e => handleChange(e.target.value)} > { categories.docs.map( data => ( <option key={data._id} value={data.name}> { data.name } </option> ))} </select>

Aquí usando handleChange puedo configurar la nueva categoría en useState que el usuario podría elegir pero surge un problema, al enviar a mi API no necesito enviar el nombre sino la ID de la categoría.

Entonces, mi pregunta aquí es cómo mostrar el nombre de la categoría que el producto ya tiene configurado, pero también al enviar a la API, ¿enviar la ID y no el nombre?