Tengo una lista de países en una matriz como la siguiente
export const countryList = [ " ", "Afghanistan", "Africa", "Albania", "Algeria", "Andorra", "Angola", ...]Luego estoy importando estos datos en el archivo React Js y mapeándolos. Cada iteración debe devolver una etiqueta de opción con valor. Me gusta lo siguiente:
import React, { useContext, useState, useRef } from "react"; import { DataContext } from "../App"; import { countryList } from "../data/countryList"; const Dropdown = (props) => { const selectedCountry = useRef(null); const { covidData } = useContext(DataContext); const [countryName, setCountryName] = useState(""); console.log(covidData); return ( <article> <select name="countries" id="countries" ref={selectedCountry} onChange={(e) => { setCountryName(e.target.value); console.log(countryName); }} > {countryList.map((country) => { return ( <option value={country} key={country}> {country} </option> ); })} </select> </article> ); }; export default Dropdown;Estos códigos crean una lista desplegable con todos los valores y la selección tiene un gancho Ref que toma el valor de la selección y, al cambiar, el valor de la variable se cambia usando un gancho useState.
De todos modos, el problema es que cuando hago clic por primera vez en una opción desplegable, veo una cadena vacía en console.log pero en el siguiente clic, veo el nombre de un condado pero no el país correspondiente en el que hice clic. Sé que suena confuso, pero aquí hay un video muy breve: https://www.loom.com/share/84a88f1cc8fe4d3995962ea926c20559?sharedAppSource=personal_library
En caso de que eso no sea suficiente, aquí está mi código completo: https://github.com/timothyroybd/covid-tracker-react/tree/incubator
¡Gracias de antemano!
Prueba este código, está funcionando.
import "./styles.css"; import { CountryList } from "./data"; import { useState } from "react"; export default function App() { const [country, setCountry] = useState(""); const setCountryName = (e) => { console.log(e); }; return ( <div className="App"> <article> <select name="countries" id="countries" onChange={(e) => { setCountryName(e.target.value); }} > {CountryList.map((country) => { return ( <option value={country} key={country}> {country} </option> ); })} </select> </article> </div> ); }mira esto. Puedes hacerlo simple de esta manera.
import React, { useContext } from 'react' import { DataContext } from '../App' import { countryList } from '../data/countryList' const Dropdown = ({ formHandler }) => { // const selectedCountry = useRef(null) const { covidData } = useContext(DataContext) // const [countryName, setCountryName] = useState('') // console.log(covidData) return ( <article> <select name='countries' id='countries' onChange={(e) => { console.log('In dropdown', e.target.value) formHandler(e.target.value) // setCountryName(e.target.value) // It will not show you the changed value because it's react state. That's why when you console log for the first time it will show "" string and later if you changed again it will show you the old value // console.log(countryName) }} > {countryList.map((country) => { return ( <option value={country} key={country}> {country} </option> ) })} </select> </article> ) } export default DropdownPara obtener más información sobre los temas asincrónicos del estado de reacción, consulte este artículo