Problem with rendering correct select option in React-CodePudding

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!

CodePudding user response：

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>
  );
}

CodePudding user response：

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