Child component has id updated in react when I don't want it to

Question

I'm fairly new to react and I'm trying to create nested tables. When I only expand one of the rows to get the nested table it works fine but when I expand more than 1 then it breaks other parts of the program that rely on the unique id for the child tables. I'd like for it to look like it is below:

However what happens is that when I expand more than 1 table, let's say 2 as in the example above then the id of the first table will be renamed to childTable1 also but I want it to stay as childTable0. In the code below the "Parent" component is actually a child of another table component but that only has 1 entry at the moment so I'm not seeing any issues in there for now but whatever solution I get I'll just use it across all of the nested tables.

        const {datas}=this.state;
        return (
            <React.Fragment>
                <Table className='table table-bordered border-dark hover' id={'ParentTable'}> 
                    <thead>
                        <tr>
                            <th scope='col'>ID</th>
                            <th scope='col'>Name</th>
                            <th scope='col'>Expand</th>
                        </tr>
                    </thead>
                    <tbody>
                        {datas.map((data, index) => 
                            {if (this.props.buttonText[index] === '^')                                 
                            {
                                //table is expanded so return row and child table
                                //tablePath is the index to get there so in the above image
                                //if index = 0 then the path would be [0]
                                //if index = 1 then the path would be [1]
                                //remember this is a child component of another table so it'll most 
                                //likely be [0,0] or [0,1] etc...

                                let tablePath = this.props.tableId;
                                if(tablePath.length < 2)
                                {
                                    tablePath.push(index);
                                }
                                else
                                {
                                    tablePath[1] = index;
                                    if (tablePath.length > 2)
                                    {
                                        //incase if user has expanded child tables also then we want 
                                        //to omit it.

                                        tablePath = tablePath.subarray(0,2);
                                    }
                                }
                                return(<React.Fragment>
                                    <tr className=...} 
                                        onMouseDown={() => ...} 
                                        key={data.ID} 
                                        id={"ParentRow"+data.ID}>
                                            <td >{data.ID}</td>
                                            <td >{data.Name}</td>
                                            <td >
                                                <button 
                                                className = {condition? "button ButtonSelected": "button ButtonNotSelected"}
                                                onClick = {() => this.props.ExpandOrCollapse(...)}
                                            >{this.props.buttonText[index]}</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td colSpan='3'>
                                                <Child
                                                ParentID = {data.ID}
                                                ExpandOrCollapse={this.props.ExpandOrCollapse}
                                                index={this.props.index}
                                                buttonText={this.props.buttonText}
                                                tableId = {tablePath}
                                                path = {this.props.path}/>
                                            </td>
                                        </tr>
                                    </React.Fragment>);
                                }
                                else
                                {
                                    //table is collapsed so just return row
                                    return(<React.Fragment>
                                    <tr className=...} 
                                        onMouseDown={() => ...} 
                                        key={data.ID} 
                                        id={"ParentRow"+data.ID}>
                                            <td >{data.ID}</td>
                                            <td >{data.Name}</td>
                                            <td >
                                                <button 
                                                className = {condition? "button ButtonSelected": "button ButtonNotSelected"}
                                                onClick = {() => this.props.ExpandOrCollapse(...)}
                                            >{this.props.buttonText[index]}</button>
                                            </td>
                                        </tr>
                                    </React.Fragment>);
                                }
                            }
                        )}
                    </tbody>
                </Table>
            </React.Fragment>
        );
    }

and the child component looks like:

    {
        const {datas} = this.state;
        return(
            <React.Fragment>
                <Table className='table table-bordered border-dark hover' id={'ChildTable'+this.props.tableId[1]}> 
                    <thead>...

Answer 1

Turns out the issue was with let tablePath = this.props.tableId; since this.props.tableID is an array it should have been let tablePath = [...this.props.tableId];