Golden Layout Dynamic Tabs - Data change on click - node.js

Question

I have created React.js Project with Golden Layout. As you see the image below it's possible to open up three other sub windows by clicking first "View Button", but when I click the second view button the data does not change, I am not able to find where I am going wrong.
First View
Second View
When trying to apply the content to the other three tabs, I get the above error.
App.js File
import React from 'react';
import './App.css';
import Applications from './components/applications';
const $ = window.$;
const App=() =>{
var config = {
content: [{
type: 'row',
content: [{
title: 'Parties',
type:'react-component',
component: 'Applications',
isClosable:false
}
]
}]
};
var myLayout = new window.GoldenLayout( config, $('#layoutContainer') );
myLayout.registerComponent( 'Applications', Applications);
myLayout.init();
return (
<div></div>
);
}
export default App;
Application.js
import React, { Component } from 'react';
import data from '../common'
import titlesparcels from './titlesparcels';
import Services from './Services';
import Document from './document';
import GoldenLayout from 'golden-layout';
let DataValue = [];
class Applications extends Component {
constructor(props){
super(props);
this.state = {
userData: ''
}
}
renderHeader(){
return(
<div >
<table style={{width: 100 + 'em'}} className="table table-striped">
<thead>
<tr>
<th>Application Id</th>
<th>agent</th>
<th>status</th>
<th>partyType</th>
<th>lodgedDate</th>
<th>View</th>
</tr>
</thead>
</table>
</div>
)
}
renderData(){
console.log("in")
DataValue = data.applications;
return DataValue.map((val,key)=>{
return(
<div key={val.id}>
<table className="table table-striped">
<tbody>
<tr>
<td>{val.general.applicationId}</td>
<td>{val.general.agent}</td>
<td>{val.general.status}</td>
<td>{val.general.partyType}</td>
<td>{val.general.lodgedDate}</td>
<td><button onClick={()=> this.showTble(val.id)} >View</button></td>
</tr>
</tbody>
</table>
</div>
)
});
}
showTble=(id)=> {
console.log("User :",this.props,"appId",id)
global.sendId = id;
this.setState({
userData: id
})
this.props.glEventHub._layoutManager.eventHub.emit('params','stateChanged' );
if(this.props.glEventHub._layoutManager){
let myLayout = this.props.glEventHub._layoutManager;
if(myLayout.root.contentItems[0].contentItems.length-1 >1){
this.forceUpdate()
}else{
var titleparcels = {
title: 'Titles & Parcels',
type: 'react-component',
component: 'titlesparcels',
isClosable:false,
props: {"id":id}
};
var services = {
title: 'Services',
type: 'react-component',
component: 'Services',
isClosable:false,
props: {"id":id}
};
try{
let window = 0;
myLayout.registerComponent( 'titlesparcels', titlesparcels);
myLayout.registerComponent( 'Services', Services);
myLayout.registerComponent( 'Document', Document);
myLayout.root.contentItems[0].addChild( titleparcels );
myLayout.root.contentItems[0].addChild( services );
data.applications.map((val,key)=>{
if(val.id === id){
val.documents.forEach(element => {
var document = {
title: 'Documents',
type: 'react-component',
component: 'Document',
isClosable:false,
props: {"doc":element.source}
};
if(window == 0){
console.log("window")
myLayout.root.contentItems[0].addChild( document );
window++;
}else{
window++;
console.log('data')
myLayout.root.contentItems[0].contentItems[3].addChild( document );
}
});
}
});
}catch(e){
alert (e)
console.log(e)
}
}else{
}
}
render() {
if(this.props.data){
let value = this.pro
console.log("value from userData",value)
}
return (
<div>
{this.renderHeader()}
{this.renderData()}
<titlesparcels userId={this.state.userData} />
</div>
);
}
}
export default Applications;