Mi API está volviendo por debajo del resultado.
Tengo el siguiente código para mostrar en la lista.
const [result,setResult] = useState([]); const fetchStatus = async ()=>{ await httpClient.get( config.resourceServerUrl+"/certificates/status").then(res=>{ setResult(res.data); setActive(true); alert(result); })y estoy mostrando una lista como la siguiente.
<div className="col-md-4"> <label htmlFor="status">Status</label> <select name="requestStatus" style={{ display: 'block' }}> <option value="" selected > Please Select the Status </option> { active && result.map((sts:any)=>{ <option key="" value=""> {sts} </option> }) } </select>aunque no hay ningún error, pero no muestra nada.
Es porque tienes {} alrededor de tu JSX, debería ser ()
active && result.map((sts:any) => ( <option>{sts}</option> ))o puedes hacer
active && result.map((sts:any) => { return ( <option>{sts}</option> ) })No creo que httpClient.get . El .then se llamará cuando se complete la obtención.
está configurando el menú desplegable para cada objeto en la matriz devuelta. Desea establecerlo en el valor de la clave request_status : sts.request_status
establece el atributo key para los elementos que creas usando el map
{ active && result.map((sts:any)=>{ {sts.request_status} }) }