How to dynamically create a string in an html tag

Question

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

Answer 1

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