Discussion :

[DiverSIG]

Bonjour,

Je voudrais créer un composant Liste déroulante, avec la liste des pays, où chaque item est le nom du pays, avec l'icône du drapeau du pays à côté. J'utilise le composant MUI Select, et le package country-flag-icons pour récupérer les images des drapeaux

Voici mon code :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function Countries() {
 
    const [selected, setStelected] = useState('')
 
    useEffect(() => {
 
    }, []);
 
    const handleChange = (e) => {
      console.log(e.target.value)
      setStelected(e.target.value)
    }
 
    return (
      <>
      <Box sx={{ minWidth: 120 }}>
      <FormControl>
        <InputLabel>Pays</InputLabel>
        <Select
          value={selected}
          label="Pays"
          onChange={handleChange}
          className={styles.country_select}
        >
          {COUNTRIES_DESCRIPTION.map(c => {
            return <MenuItem value={c.alpha3}>
                      <span className={styles.flag}><CountryFlag alpha3={c.alpha3} className={styles.flag32}/></span>{c.name}
                    </MenuItem>
          })}
        </Select>
      </FormControl>
    </Box>  
    </>
    );
}

CountryFlag est un composant qui renvoie l'image du drapeau en lui passant en paramètre le code alpha 3 du pays (ex : FRA pour la France, cf. norme ISO-3166)

COUNTRIES_DESCRIPTION est un tableau qui contient les infos sur les pays :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
const COUNTRIES_DESCRIPTION = [
{"name": "Afghanistan", "alpha2": "AF", "alpha3": "AFG", "numeric": "004"},
{"name": "Åland Islands", "alpha2": "AX", "alpha3": "ALA", "numeric": "248"},
{"name": "Albania", "alpha2": "AL", "alpha3": "ALB", "numeric": "008"},
{"name": "Algeria", "alpha2": "DZ", "alpha3": "DZA", "numeric": "012"},
...

Mon problème :
Le premier pays que je sélectionne s'affiche bien dans le Select avec son drapeau (cf. image ci-dessus), mais si je sélectionne un autre pays, je n'ai que le libellé du pays qui change, et l'image ne change pas. du coup je me retrouve avec un drapeau qui ne correspond plus au nom de pays :




Qu'est ce qui cloche?


Merci,

Nico