Discussion :

[vincent922]

Bonjour,

J'ai besoin de créer une table dynamiquement, cette table a trois niveaux d'accordéon (lignes qui se déplient) donc je dois attribuer un id à chacune de mes balises <tr> pour que la fonctionnalité d'accordéon de bootstrap fonctionne correctement.

Je peux avoir un nombre infini de <tr> donc je voudrais créer mes <tr> de la manière suivante :

- Je lis les données reçues avec un .map
- Pour chaque donnée lue, je récupère l'index actuel dans la fonction map.
- Dans mon tag html <tr> je crée mon id avec une chaîne de caractère prédéfinie à laquelle j'ajoute l'index par une interpolation.

Pour ce faire, j'ai écrit le code suivant :
(Le retour de cette fonction complète une table déjà créée en créant le <tr> du <tbody>)

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
function renderTableData() {
        if(data?.tableData){
            return data.tableData.map((currentData, index) => {
                return (
                    <>
                        <tr key={nanoid()} data-toggle="collapse" data-bs-toggle="collapse" data-bs-target="#main-accordion${index}">
                            <td>{currentData.someField}</td>
                        </tr>
                        <tr className="collapse accordion-collapse" id="main-accordion${index}">
                            //Un autre <tr> qui va contenir mon premier accordéon imbriqué dans mon tableau principal
                        </tr>
                    </>
                )
        })} else{return undefined}
    }

Comme vous pouvez le voir dans le code ci-dessus, j'essaie de créer mon id de la manière suivante :

Code :

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

tag-property="#name_id${index}"

.

Mais l'interpolation ne se fait pas et la chaîne de caractère créée est : "#main-accordion${index}".

Cela me donne l'erreur suivante :

Failed to execute 'querySelector' on 'Document': '#main-accordion${index}' is not a valid selector.

Quelqu'un sait-il comment faire une interpolation de ce type dans une propriété d'une balise html ? Je ne vois vraiment pas comment faire, toute aide serait la bienvenue.

[-Nikopol-]

comme ceci data-bs-target="{`#main-accordion${index}`}" (attention ce sont des back tildes pas des quotes)
ou data-bs-target={"#main-accordion" + index}

[vincent922]

Super ça marche bien avec ta syntaxe, merci beaucoup