Quiero mostrar la lista de provincias en el elemento seleccionado. Obtuve datos de API pero no puedo mostrarlos en el elemento seleccionado... He visto mucho sobre React-Select en Internet, pero uso el elemento CSelect... Esto es mi código... ¿Qué pasa?
const RequestAgency = (props) => { let provinces = []; function renderProvinces(){ UserService.getProvince().then( (response) => { provinces =response.data ; provinces.map(province=>{ console.log(province.ItemName) return <option value={province.ID}>{province.ItemName}</option> }) } ); } return ( <CFormGroup row> <CCol md="3"> <CLabel htmlFor="province"> province</CLabel> </CCol> <CCol xs="12" md="9"> <CSelect custom name="province" id="province" > {renderProvinces()} </CSelect> </CCol> </CFormGroup> ) } export default RequestAgencySiempre es una buena práctica usar el gancho de reacción useState , para almacenar datos y renderizar en la página.
Le sugiero que use useState correctamente y use useEffect para obtener los datos de api.
Aquí he usado useState para almacenar datos, useEffect para obtener datos de api y use async/await para llamadas api asíncronas.
Este código parece fácil de entender y depurar.
import { useEffect, useState } from "react"; const RequestAgency = (props) => { const [provinces, setProvinces] = useState([]); useEffect(() => { const getData = async () => { const provinces = await UserService.getProvince() setProvinces(provinces.data) }; getData(); }, []); return ( <CFormGroup row> <CCol md="3"> <CLabel htmlFor="province"> province</CLabel> </CCol> <CCol xs="12" md="9"> <CSelect custom name="province" id="province"> {provinces.map((province, i) => { return ( <option key={i} value={province.ID}> {province.ItemName} </option> ); })} </CSelect> </CCol> </CFormGroup> ); }; export default RequestAgency;