Bonjour,

Pour créer un composant, j'utilise les composants de base MUI. J'ai un json en entrée, que j'affiche sous forme de TreeView, un composant TextField, et un composant Select

Chaque élément de mon json est de la forme :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
{ id: 36, fr: "003-003", en: "003-003", type: "JURI", children: [] }
avec éventuellement dans children d'autres éléments de la même forme.

Quand je clique sur un item du TreeView, je voudrais mettre à jour le TextField avec la propriété 'fr', et mettre à jour le Select avec la propriété 'type'.
Pour cela, je passe par un useState pour récupérer les propriétés de l'élément du json qui a été sélectionné

Le 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
36
37
38
39
const [selectedItem, setSelectedItem] = useState({}); 
 
  const onSiteSelect = (itemId) => {
    setSelectedItem(json.data.filter(el => el.id === itemId)[0])
  }
 
  return (
    <Box sx={{ flexGrow: 1 }}>
      <Grid container spacing={2}>
        <Grid size={2}>
          <Treeview json={json} language="fr" showTitle={false} fctOnClick={onSiteSelect}/>,
        </Grid>
        <Grid size={5}>
          <Box
            component="form"
            sx={{ '& > :not(style)': { m: 1, width: '25ch' } }}
            noValidate
            autoComplete="off"
          >
            <TextField value={selectedItem.fr} label="Nom" defaultValue=" " variant="outlined" />
            <FormControl fullWidth>
              <InputLabel>Type</InputLabel>
              <Select
                defaultValue=""
                value={selectedItem.type}
                label="Type"
              >
                <MenuItem value={"GEOG"}>Geographique</MenuItem>
                <MenuItem value={"JURI"}>Juridique</MenuItem>
              </Select>
            </FormControl>
          </Box>
        </Grid>
        <Grid size={5}>
 
        </Grid>
      </Grid>
    </Box>
  );

Quand je clique sur un item du TreeView, je récupère bien les infos de l'élément json dans selectedItem, le TextField se met bien à jour, mais pas le Select.

Qu'est ce qui cloche?


Merci,

Nico