Ufdjrw

In my React App I needed to collapse nested table rows with this method:

renderRow(parameters, keyName, depth) 
 let id = Math.random()
 .toString(36)
 .substring(7);
 let miscRow = this.renderMiscParamTableRow(parameters[keyName], depth, id);

 if (miscRow === null) 
 return (
 <tr className="normal-row" key=id>
 <td>this.renderRowName(keyName, parameters[keyName])</td>
 <td>this.renderRowType(parameters[keyName])</td>
 <td>this.renderDescription(parameters[keyName])</td>
 </tr>
 );
 

 return (
 <React.Fragment key=id>
 <tr
 style= cursor: "pointer" 
 data-toggle="collapse"
 data-target="#" + id
 onClick=() => 
 window.$("#" + id + "_rotate").toggleClass("upside");
 
 className="accordion-toggle toggle normal-row"
 >
 <td>
 <div className="main-cell" style= whiteSpace: "nowrap" >
 this.renderRowName(keyName, parameters[keyName])" "
 <span id=id + "_rotate" className="rotate fa fa-chevron-down">
 " "
 </span>
 </div>
 </td>
 <td>this.renderRowType(parameters[keyName])</td>
 <td>this.renderDescription(parameters[keyName])</td>
 </tr>
 miscRow
 </React.Fragment>
 );

The component that uses this function is called ParameterTable and is used like this:
App->MainItem->ViewContent->ParameterTable if this is relevant.

The Problem:

I fetch the data, that is passed down to the component and when I click the rows it does not always expand. Sometimes all tables can be toggled, sometimes only 2 out of 20, regardless of the nesting level (up to 5 nested tables).

Bootstrap is loaded via the script tag in the public/index.html file.

Any idea, why this happens and how I can resolve this?