my fault

src/ts/@overflow/target/react/components/TargetDetail.tsx

@@ -15,6 +15,7 @@ export type Props = StateProps & DispatchProps;
 
 export interface State {
   target: any; // todo. fix to Target
+  infra: any;
 }
 
 
@@ -24,6 +25,7 @@ export class TargetDetail extends React.Component<Props, State> {
     super(props, context);
     this.state = {
       target: null,
+      infra: null,
     };
   }
 
@@ -35,8 +37,17 @@ export class TargetDetail extends React.Component<Props, State> {
       'description': '',
       'sensorCount': 'todo.',
     };
+    let infra = {
+      'id': '1',
+      'createDate': '2017-01-01',
+      'childId': '111',
+      'type': 'Host',
+    };
 
-    this.setState({ target: data });
+    this.setState({
+      target: data,
+      infra: infra,
+    });
   }
 
   public handleRemoveTarget(): void {
@@ -46,9 +57,9 @@ export class TargetDetail extends React.Component<Props, State> {
   public render(): JSX.Element {
     return (
       <Container fluid>
-        <TargetBasicInfo target={this.state.target} />
+        <TargetBasicInfo target={this.state.target} infra={this.state.infra} />
         <br />
-        <TargetDetailInfra target={this.state.target} />
+        <TargetDetailInfra target={this.state.target} infra={this.state.infra} />
         <br />
         <Button primary floated={'right'} negative onClick={this.handleRemoveTarget}>Remove</Button>
       </Container>
@@ -59,10 +70,10 @@ export class TargetDetail extends React.Component<Props, State> {
 
 export interface TargetBasicInfoProps {
   target?: any; // todo. fix to Target
+  infra: any;
 }
 
 export interface TargetBasicInfoState {
-  infra: any;
 }
 
 export class TargetBasicInfo extends React.Component<TargetBasicInfoProps, TargetBasicInfoState> {
@@ -70,22 +81,9 @@ export class TargetBasicInfo extends React.Component<TargetBasicInfoProps, Targe
   constructor(props: TargetBasicInfoProps, context: TargetBasicInfoState) {
     super(props, context);
     this.state = {
-      infra: null,
     };
   }
 
-  public componentWillMount(): void {
-    let infra = {
-      'id': '1',
-      'createDate': '2017-01-01',
-      'childId': '111',
-      'type': 'Host',
-    };
-    this.setState({
-      infra: infra,
-    });
-  }
-
   public render(): JSX.Element {
     return (
       <Container fluid>
@@ -132,7 +130,7 @@ export class TargetBasicInfo extends React.Component<TargetBasicInfoProps, Targe
                 <Header size='small'>Type</Header>
               </Table.Cell>
               <Table.Cell>
-                {this.state.infra.type}
+                {this.props.infra.type}
               </Table.Cell>
             </Table.Row>
           </Table.Body>

src/ts/@overflow/target/react/components/TargetDetailInfra.tsx

@@ -8,6 +8,7 @@ import Target from '@overflow/target/api/model/Target';
 
 export interface StateProps {
   target: any;
+  infra: any;
 }
 
 export interface DispatchProps {
@@ -16,7 +17,6 @@ export interface DispatchProps {
 export type Props = StateProps & DispatchProps;
 
 export interface State {
-  infra: any; // todo. fix to Infra
   childInfra: any; // todo. fix to InfraTypes
 }
 
@@ -26,7 +26,6 @@ export class TargetDetailInfra extends React.Component<Props, State> {
   constructor(props: Props, context: State) {
     super(props, context);
     this.state = {
-      infra: null,
       childInfra: null,
     };
   }
@@ -52,7 +51,6 @@ export class TargetDetailInfra extends React.Component<Props, State> {
     };
 
     this.setState({
-      infra: infra,
       childInfra: child,
     });
   }
@@ -62,7 +60,7 @@ export class TargetDetailInfra extends React.Component<Props, State> {
   }
 
   public renderInfra(): JSX.Element {
-    let type = this.state.infra.type;
+    let type = this.props.infra.type;
     switch (type) {
       case 'Host': {
         return <InfraHostTable data={this.state.childInfra} />;