How to dynamically create a string in an html tag-CodePudding

I need to create a table dynamically, this table has three accordion levels (unfolding line) so I need to assign an id to each of my <tr> tags for bootstrap's accordion functionality to work properly.

I can have an infinite number of <tr> so I would like to create my <tr> in the following way:

I read my data received with a .map
For each read data I get the current index in the map function
In my html tag <tr> I create my id with a known string to which I add the index by an interpolation.

To do this I wrote the following code: The return of this function completes an already created table by creating the <tr> of the <tbody>

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}">
                            //Another <tr> which will contain my first nested accordion
                        </tr>
                    </>
                )
        })} else{return undefined}
    }

As you can see in the code above I try to create my id in the following way: tag-property="#name_id${index}"

But the interpolation is not done and the string created is: "#main-accordion${index}"

This gives me the following error:

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

Does anyone know how to make an interpolation of this type in a property of an html tag? I really don't see how to do it, any help would be great

CodePudding user response：

It seems like you are trying to use template literals but are using double quotes ("") instead of backticks (``)

if I understood your question correctly, replace this piece of code

 data-bs-target="#main-accordion${index}"

with

data-bs-target={`#main-accordion${index}`}

JSX values must be an expression or quoted JSX text, so thats why you have to wrap the backticks in curly brackets