Bonjour à tous,

Sous des graph qui affichent des mesures, il y a le détail de ces mesaures. Il y a parfois 50, 100 lignes.

Dans mon car j'ai trois graph, pour une autre station, j'ai 8 graph.

Pour les détails, j'ai réussi a les fermer et en appuyant sur le boutton +, ils se développent et quand j'appuye sur le boutton -, il se ferment.

Le problème est quand j'appuye sur 1 +, tous les détails se développe et évidemment, j'aimerais que le + développement uniquement le détail qui lui est associé.

Il faudrait donc que je travaille avec un id afin que le boutton + avec l'ID 1, développe le <collapse> avec l'ID 1, etc

Voici mon code:

Code typescript : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
 
  const [isCollapsed, setIsCollapsed] = useState(true)

Code html : 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
 
<TouchableOpacity onPress={() => setIsCollapsed(!isCollapsed)}>
 
                      <View style={{ flexDirection: 'row', alignItems: 'center' }}>
 
                        <FontAwesome name={isCollapsed ? 'plus-square' : 'minus-square'} size={25} color="#000" />
 
                        <Text style={{ marginLeft: 10 }}>Détail</Text>
 
                      </View>
 
                    </TouchableOpacity>
 
 
                    <Collapsible 
                     key={id_sensor} 
                      collapsed={isCollapsed} style={styles.sectionDetailCollapse}
                    >
 
                   <Text>Tata</Text>
 
                    </Collapsible>

Dans cette partie, je pensais ajouter l'ID du capteur

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
<TouchableOpacity onPress={(id_sensor) => setIsCollapsed(!isCollapsed)}>

Mais je sais pas comment adapter mon code pour récupérer l'ID, mais surtout pour que l'action cible le bon élément.

Est-ce que vous pourriez partager votre expérience?

je vous remercie