2 pièce(s) jointe(s)
Composant Select avec une icône
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:
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:
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"},
... |
Pièce jointe 667151
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 :
Pièce jointe 667153
Qu'est ce qui cloche?
Merci,
Nico
