I have a list of countries in an array like the following
export const countryList = [
" ",
"Afghanistan",
"Africa",
"Albania",
"Algeria",
"Andorra",
"Angola", ...]
Then I am importing this data in React Js file and map through it. Each iteration should return an option tag with value in it. Like the following:
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;
These codes create a dropdown list with all the values and the select has a Ref hook that grabs the value of select and on change the variable's value is changed using a useState hook.
Anyway, the problem is that when I first click on a drop-down option, I see an empty string in console.log but in the next click, I see a county's name but not the corresponding country that I've clicked. I know it sounds confusing but here's a very short video: https://www.loom.com/share/84a88f1cc8fe4d3995962ea926c20559?sharedAppSource=personal_library
In case, if that is not enough, here's my whole code: https://github.com/timothyroybd/covid-tracker-react/tree/incubator
Thank you in advance!
Try this code, its working
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>
);
}check this out. You can make it simple this way.
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 Dropdown
To learn more about react state asynchronous topics check this article