Lost focus from the input when you change?

export default class InvoiceCreate extends Component {
 constructor(props) {
super(props);
 this.state = {
 products: [],
customers:[],
valueCustomer:",
valueProducts:",
 dataTable: [],
total:0
};
 this.loadData = this.loadData.bind(this);
 this.add = this.add.bind(this);
 this.changeStateCustomer = this.changeStateCustomer.bind(this);
 this.changeStateProduct = this.changeStateProduct.bind(this);
 this.funcCustomers = this.funcCustomers.bind(this);
 this.funcProducts = this.funcProducts.bind(this);
 this.price = this.price.bind(this);
 this.changeDiscount =this.changeDiscount.bind(this);
 this.sendForm = this.sendForm.bind(this);
 this.nameAutoFocus = true;
}
 componentDidMount() {
this.loadData();
 this.nameAutoFocus = false;
}
 sendForm() {
 let content
}
 changeDiscount(e) {
 if (e.target.value===") return null;
 if ((e.target.value!==")&&(e.target.value)) {
 let discount_id = e.target.parentElement.parentElement.parentElement.dataset.id;
 let dataTable=this.state.dataTable;
 dataTable[discount_id].qty = e.target.value;
 let total=0;
 for (let i=0;i<datatable.length;i++) { total +="dataTable[i].price*(1-dataTable[i].qty/100);" } this.setstate({ total:total, datatable:datatable }); console.log('test0'); price(data) let name="this.state.valueProducts.value;" for(let i="0;i<data.length;i++)" if (name="==data[i].name)" return (data[i].price); funccustomers () props="{" properties: this.state.customers }; selectcustomers(props); console.log('test1'); funcproducts this.state.products selectproducts(props); console.log('test2'); add(e) e.preventdefault(); e.persist(); datatable="this.state.dataTable" ; fetch(' products api') .then((response)> {
 return response.json()
 .then((data) => {
dataTable.push({
 name: this.state.valueProducts.value
 price: this.price(data),
 qty: document.getElementById('formControlText').value
});
 let discount = document.getElementById('formControlText').value / 100;
 let total = 0;
 for (let i = 0; i < dataTable.length; i++) {
 total += dataTable[i].price
}
 total = total * (1 - discount);
this.setState({
 total: total
});
});
});
}
 changeStateCustomer = (valueCustomer) => {
this.setState({valueCustomer:valueCustomer});
};
 changeStateProduct = (valueProduct) => {
this.setState({valueProducts:valueProduct});
};
 loadData() {
 let customers=[],
 products = [];
fetch('/api/products')
 .then((response) =>
response.json()
 .then((data) =>{
 for(let i=0; i<data.length;i++) products[i]="data[i].name" this.setstate({products:products}) }) ); fetch(' api customers') .then((response)>
response.json()
 .then((data) =>{
 for(let i=0; i<data.length;i++) customers[i]="data[i].name;" this.setstate({customers:customers}) }) ) } render() { return ( <div classname="container">
 <pageheader>Create Invoice</pageheader>
 <form onsubmit="{this.add}">
 <formgroup controlid="formControlText" style="{{width:20+'%'}}">
 <controllabel>Discount (%)</controllabel>
<formcontrol>
</formcontrol></formgroup>
<label>Customer</label>
 <select name="form-field-name" style="{{width:40+'%'}}" value="{this.state.valueCustomer}" onchange="{this.changeStateCustomer}" options="{this.funcCustomers()}">
 Add products
</select>
 <button type="submit" bsstyle="primary">Add</button>
</form>
 <loadtabledata focus="{this.nameAutoFocus}" discount="{this.changeDiscount}" data="{this.state.dataTable}">
 </loadtabledata><table responsive>
<thead>
the <tr>
<th>Name</th>
<th>Price</th>
<th>Qty</th>
</tr>
</thead>
</table>
<pageheader>Total:
 <numberformat displaytype="{'text'}" value="{this.state.total}" decimalseparator="{'.'}" decimalscale="{2}/">
</numberformat></pageheader>
 <button bsstyle="success" onclick="{this.sendForm}">
Submit
</button>
 </data.length;i++)></data.length;i++)></datatable.length;i++)>

import React from 'react';
ModalDelete import from './modals/modal_delete';
import { FormGroup,FormControl } from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';

export default function (props) {
 let datas = props.data;
 let count=-1;
 let listDatas = datas.map((data) => {
count++;
 return {transform(data, props.discount props.focus)};
});
 return (
{listDatas}
);
}

function transform(mass, discount, focus) {
 let props = [];
 let count=0;
 for (let key in mass) {
props.push(mass[key])
}
 // props.push(<modaldelete loaddata="{loadData}">);
 return props.map((prop) => {
 if (count===2) return (

 <formgroup controlid="formControlText" style="{{width:20+'%'}}">
 <formcontrol type="text" defaultvalue="{prop}" bsclass="lg" onchange="{discount}" autofocus="{focus}" key="{1000}">
</formcontrol></formgroup>

 ); console.log('test4');
count++;
 return {prop};
});
}</modaldelete>