0
219
VistasCree dinámicamente opciones desde un menú de selección desplegable en reaccionar
Entonces, estoy tratando de crear dinámicamente las opciones de un menú desplegable de selección, hago la búsqueda de una API con los estados de mi país, pero no sé cómo acceder al contenido dentro de cada objeto.
Como puede ver a continuación, los datos se extraen de la API, es decir, la búsqueda funcionó, pero no sé cómo crear las opciones que estarán dentro de Seleccionar con cada objeto. 
import { EmailIcon, LocationIcon } from './assets/FormSvgIcons' import { useEffect, useState } from 'react'; const SettingsForm = () => { const [stateList, setStateList] = useState([]); const [userLocation, setUserLocation] = useState(''); const handleLocation = () => { setUserLocation(e.target.value); } useEffect(() => { let initialStates = []; fetch('https://servicodados.ibge.gov.br/api/v1/localidades/estados/') .then(response => { return response.json(); }).then(data => { initialStates = data.map((states) => { return states }); console.log(initialStates); setStateList({states: initialStates}); }); }, []); const createDropdownOptions = () => { const createOptions = stateList.map((state, i) => { Object.keys(state).map(singleState => ( <option value={i}>{singleState.sigla}</option> )) }); return createOptions; } return ( <form> <div className="user-country"> <label className="white-label"> Local </label> <div className="input-icon-wrapper"> <div className="icon-input w-embed"> <LocationIcon /> </div> <select className="select-field white-select w-select" id="locationField" name="locationField" onChange={handleLocation} > {createDropdownOptions()} </select> </div> </div> </form> ) se que el error esta en la funcion createDropdownOptions porque es la encargada de crear las opciones, pero no se como hacerlo, alguna luz?
3 Respuestas
Responde la pregunta0
Primero podría simplificar su useEffect al siguiente código. Como está haciendo un map donde la devolución de llamada devuelve el mismo objeto para cada iteración, es mejor que use data tal como están, porque el resultado sería el mismo.
useEffect(() => { fetch("https://servicodados.ibge.gov.br/api/v1/localidades/estados/") .then((response) => { return response.json(); }) .then((data) => { console.log(data); setStateList(data); }); }, []); Luego cambie createDropdownOptions al código a continuación. Puede cambiar el value o lo que se muestra a nome :
const createDropdownOptions = () => { const createOptions = stateList.map((state) => ( <option key={state.id} value={state.sigla}> {state.sigla} </option> )); return createOptions; }; Y, finalmente, deberá pasar el evento a handleLocation :
const handleLocation = (e) => { setUserLocation(e.target.value); }0
Veo su problema, su lógica es correcta, pero está mal implementada, una vez que ha filtrado los datos, solo representa un nuevo componente:
import { EmailIcon, LocationIcon } from "./assets/FormSvgIcons"; import React, { useEffect, useState } from "react"; export default function SettingsForm() { const [stateList, setStateList] = useState([]); useEffect(() => { fetch("https://servicodados.ibge.gov.br/api/v1/localidades/estados/") .then((response) => { return response.json(); }) .then((data) => { console.log(data); setStateList(data); }); }, []); return ( <form> <div className="user-country"> <label className="white-label">Local</label> <div className="input-icon-wrapper"> <div className="icon-input w-embed"> <LocationIcon /> </div> <select className="select-field white-select w-select" id="locationField" name="locationField" onChange={handleLocation} > {stateList.map((state) => { return <CreateDropdownOptions state={state} />; })} </select> </div> </div> </form> ); } function CreateDropdownOptions({ state }) { return ( <option key={state.id} value={state.sigla}> {state.sigla} </option> ); }Recomiendo usar un componente para cada opción, esto lo hará más fácil si luego necesita hacer alguna acción en el
0
No pienses demasiado. Puntas:
- Mantenga su lógica de búsqueda lo más simple posible.
- Prefiera Async Await en lugar de luego encadenar para facilitar la lectura.
- Respete la inicialización de su estado. Si dijo que es una matriz, no la configure como un objeto.
Si tiene una matriz, puede mapearla fácilmente en jsx y generar sus opciones. Lo hiciste muy bien y te acercaste mucho. Echa un vistazo a los cambios que he hecho para que funcione:
import { useEffect, useState } from 'react'; export const SettingsForm = () => { const [stateList, setStateList] = useState([]); const [userLocation, setUserLocation] = useState(''); const handleLocation = () => { setUserLocation(e.target.value); }; useEffect(() => { const loadOptions = async () => { const data = await fetch( 'https://servicodados.ibge.gov.br/api/v1/localidades/estados/' ).then((response) => { return response.json(); }); setStateList(data); }; loadOptions(); }, []); return ( <form> <div className="user-country"> <label className="white-label">Local</label> <div className="input-icon-wrapper"> <div className="icon-input w-embed"></div> <select className="select-field white-select w-select" id="locationField" name="locationField" onChange={handleLocation} > {stateList.map((state) => { return ( <option key={state.nome} value={state.nome}> {state.sigla} </option> ); })} </select> </div> </div> </form> ); };¡Espero eso ayude! ¡sigan con el buen trabajo y no duden en comunicarse en caso de que todavía estén atascados!