Lista de Sedes y Subsedes. Cada Sede tiene subsedes, y esta sede le pertenece a un Cliente.

ListSedes.js

import React from 'react';
import { Collapse, Icon, Select } from 'antd';
import { Form, Input, Button, message } from 'antd';

import AddItemInput from './AddItemInput'
import ListSubStation from './ListSubStation'
import SaveLocationForm from './SaveLocationForm'
import ClientService from '../../../clientService'

const { Panel } = Collapse;
const { Option } = Select;

class ListSedes extends React.Component{
	
	inputElement = React.createRef()
	
	constructor(props){
		super(props);
		this.state={
			substations:[],
			currentSubStation:{name:'', key:''},
			subsidiaries:[{name:'',location:''}]
		}
	}
	
	handleClick = e => {
		const subsidiary = this.state.subsidiaries[e.target.dataset.id];
		ClientService.saveOrUpdateSubsidiary({data:subsidiary}).then(res =>{
  			message.success('Se guardo correctamente los datos.');
  		}).catch(error => {
  			message.error('No se guardo correctamente, intentalo otra vez.');
  			console.log("CONSOLA ERROR",error);
  		})
	}
	
	handleChange = e => {
		console.log("event onChange");
		if ("ant-input location".includes(e.target.className) ) {
			let subsidiary = [...this.state.subsidiaries];
			subsidiary[e.target.dataset.id]["location"] = e.target.value;
			this.setState({ subsidiary }, () => console.log(this.state.subsidiary))
		}
	}
	
	componentDidMount(){
		ClientService.listSubstationBySubsidiary({subsidiaryid:1}).then(res => {
			console.log("LISTA DE SUBSTATIONES",res.data)
		}).catch(error => {
			message.error('No se puede obtener la lista de Subestaciones. Actualize la página.');
  			console.log("CONSOLA ERROR",error);
		})
	}
	
	handleInput = e =>{
		e.preventDefault()
		const itemText = e.target.value
	    const currentSubStation = { name: itemText, key: Date.now() }		
	    this.setState({
	    	currentSubStation,
	    })
	}
		
		addItem = e => {
		    e.preventDefault()
		    const newItem = this.state.currentSubStation
		    if (newItem.name !== '') {
		      const substations = [...this.state.substations, newItem]
		      this.setState({
		    	  substations: substations,
		    	  currentSubStation: { name: '', key: '' },
		      })
		    }
		  }
		
	renderSubsidiaries = (item,index) => {
	    return (
    		<Collapse
	            expandIconPosition="right"
	            key={index}
	          >
	            <Panel header={item.name} key={item.key} extra={genExtra()}>
			<SaveLocationForm 
			  value={item.location}
			  name={`location-${index}`}
			  handleChange={this.handleChange}
			  handleClick={this.handleClick}
			  dataindex={index}
			  datasubsidiary={item}
			/>      
			 <ListSubStation entries={this.state.substations} />
			 <AddItemInput
			addItem={this.addItem}
			inputElement={this.inputElement}
			handleInput={this.handleInput}
			currentItem={this.state.currentSubStation}
			placeHolder="Agregar Sub Estacion"
			 />
	           </Panel>
			<style jsx>{`
			.ant-collapse.ant-collapse-icon-position-right {
				    margin-bottom: 1em;
				}
			`}</style>
            </Collapse>
	    )
	  }
	
	render(){
		this.state.subsidiaries = this.props.subsidiaries
	    	const listItems = this.state.subsidiaries.map(this.renderSubsidiaries);
		return(
			<div className="list-sedes">{listItems}</div>	
		)
	}
}

const genExtra = () => (
		  <Icon
		    type="ellipsis"
		    onClick={event => {
		      // If you don't want click extra trigger collapse, you can prevent this:
		      event.stopPropagation();
		    }}
		  />
		);

export default ListSedes;

Sedes.js

import React from 'react';
import { Link,Redirect } from "react-router-dom";
import Sidebar from '../../component/Sidebar'
import AddItemInput from '../../component/web/sedes/AddItemInput'
import ListSedes from '../../component/web/sedes/ListSedes'
import ClientService from '../../clientService'
import { Layout, Typography, Input, Button, Form, message } from 'antd';
import { Row, Col } from 'antd';


const { Header, Content, Footer, Sider } = Layout;
const { Title  } = Typography;
const InputGroup = Input.Group;

function callback(key) {
	  console.log(key);
}

const genExtra = function(){
	return(<Icon
		    type="ellipsis"
			    onClick={event => {
			      // If you don't want click extra trigger collapse, you can prevent this:
			      event.stopPropagation();
			    }}
			  />
			)
};

class Sedes extends React.Component{
	
	inputElement = React.createRef()
	
	constructor() {
	    super();
	    this.state={
    		sedes:[],
    		currentSede:{name:'',location:'',key:'', id:undefined}
	    }
	  }
	
	deleteItem = key => {
	    const filteredItems = this.state.items.filter(item => {
	      return item.key !== key
	    })
	    this.setState({
	      items: filteredItems,
	    })
	  }
	
	handleInput = e =>{
		const itemText = e.target.value
	    const currentSede = { name: itemText, key: Date.now() }
	    this.setState({
	    	currentSede,
	    })
	}
	
	componentDidMount(){
		const { clientid } = this.props.location.state;
		ClientService.listSedesByClient({clientid:clientid}).then(res => {
			const sedes = res.data;
			this.setState({
		        sedes: sedes,
		    })
		})
	}
	
	addItem = (e) => {
	    e.preventDefault();
	    const { clientid } = this.props.location.state;
	    const newItem = {...this.state.currentSede, client:{id:clientid}}
	    if (newItem.name !== '') {
	    	ClientService.saveSubsidiary({data:newItem}).then(res => {
	    		message.success('Se guardo correctamente los datos.');
	    		const sedes = [...this.state.sedes, res.data];
		  	    this.setState({
		  	        sedes: sedes,
		  	        currentSede: { name: '', location:'', key: '', id:undefined },
		  	    })
	    	}).catch(error => {
	    		message.error('No se guardo correctamente, intentalo otra vez');
	    		console.log("CONSOLE ERROR:",error)
	    	})
	    }
	  }
	
	render(){
		return(
				<Layout style={{ minHeight: '100vh' }}>
		    		<Sidebar />
		            <Layout>
		            <Header style={{ background: '#361C7D', height:'96px' }}> <div><h2 style={{color:"white", marginTop:"30px"}}>SUNAT</h2></div> </Header>
		              <Content>
		                <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
		                	<Row>
		                		<Col span={16} offset={2}>
		                			<Title level={3}>Sedes y Subestaciones</Title>
		                		</Col>
		                	</Row>
		                	<Row>
		                		<Col span={17} offset={2}>
		                			<ListSedes subsidiaries={this.state.sedes} deleteItem={this.deleteItem}/>
		                		</Col>
		                	</Row>
		                	<Row>
		                		<Col span={18} offset={2}>
			                		<AddItemInput
					                addItem={this.addItem}
					                inputElement={this.inputElement}
					                handleInput={this.handleInput}
					                currentItem={this.state.currentSede}
					                placeHolder="Agregar Sede"
					                />
		                		</Col>
		                	</Row>
		                </div>
		              </Content>
		              <Footer style={{ textAlign: 'center' }}>Tecnica Ingenieros 2019</Footer>
		            </Layout>
		          </Layout>
			)
	}
}

export default Sedes;