Not able to insert data in few ReactJs Form input fields - reactjs

Question

I am creating a form which has 23 input fields. In this form, i am not able to add any data through all fields are copy pasted.Few fields are editable I can enter any data while few fields are not editable I can see cursor but I cannot enter any data. Fields beneath long-term liablity are editable while above fields are not editable
<form onSubmit={this.handleSubmitFirebase}>
<div className="form-group label-floating is-empty">
<label className="control-label">Accounting period</label>
<input type="date" className="form-control" ref={el => this.billto = el} onChange={this.handleChange} />
<input type="date" className="form-control" ref={el => this.billfrom = el} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">WORKING CAPITAL</label>
<input type="text" className="form-control" ref={el => this.state.capital = el} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">CURRENT ASSETS</label>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Cash</label>
<input type="text" className="form-control" value={this.state.cash} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Investments</label>
<input type="text" className="form-control" value={this.state.investments} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Inventories</label>
<input type="text" className="form-control" value={this.state.inventories} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Accounts receivable</label>
<input type="text" className="form-control" value={this.state.ac_receiv} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Pre-paid expenses</label>
<input type="text" className="form-control" value={this.state.pre_paid_exp} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Other</label>
<input type="text" className="form-control" value={this.state.other} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Total current Assets</label>
<input type="text" className="form-control" value={this.state.curentAssetTotal} onClick={this.countTotal} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">FiXED ASSETS</label>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Property and equipment</label>
<input type="text" className="form-control" value={this.state.prop_equipmnt} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Leasehold improvements</label>
<input type="text" className="form-control" value={this.state.leasehold} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Equity and other investments</label>
<input type="text" className="form-control" value={this.state.equity} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Less accumulated depreciation(-Value)</label>
<input type="text" className="form-control" value={this.state.accum_depreciation} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Total fixed Assets</label>
<input type="text" className="form-control" value={this.state.fixedAssetTotal} onClick={this.countTotal} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Other Assets</label>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Charity</label>
<input type="text" className="form-control" value={this.state.Charity} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Total other Assets</label>
<input type="text" className="form-control" value={this.state.otherAssetTotal} onClick={this.countTotal} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Grand Total Assets</label>
<input type="text" className="form-control" value={this.state.GrandotherAssetTotal} onClick={this.countTotal} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Current Liabilities</label>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Accounts payable</label>
<input type="text" className="form-control" value={this.state.acc_payable} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Accrued wages</label>
<input type="text" className="form-control" value={this.state.accure_wages} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Accrued compensation</label>
<input type="text" className="form-control" value={this.state.accure_compens} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Accounts receivable</label>
<input type="text" className="form-control" value={this.state.acc_receivable} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Income taxes payable</label>
<input type="text" className="form-control" value={this.state.it_tax_payble} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Unearned revenue</label>
<input type="text" className="form-control" value={this.state.uneared_revenue} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Other</label>
<input type="text" className="form-control" value={this.state.OtherLiability} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Total current Liabilities</label>
<input type="text" className="form-control" value={this.state.currLiabilitiesTotal} onClick={this.countTotal} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Long-term Liabilities</label>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Mortgage payable</label>
<input type="text" className="form-control" value={this.state.mortg_payable} onClick={this.countTotal} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Total Long-termLiabilities</label>
<input type="text" className="form-control" value={this.state.longtermLiabilitiesTotal} onClick={this.countTotal} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Owner Equity</label>
<input type="text" className="form-control" value={this.state.owner_equity} onClick={this.countTotal} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Investment capital</label>
<input type="text" className="form-control" value={this.state.investment_capital} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Accumulated retained earnings</label>
<input type="text" className="form-control" value={this.state.accuml_earning} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Total</label>
<input type="text" className="form-control" value={this.state.totalOwnerEquity} onClick={this.countTotal} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<label className="control-label">Total Liabilities & Stockholder Equity</label>
<input type="text" className="form-control" value={this.state.totalLaibility_stackEquity} onClick={this.countTotal} onChange={this.handleChange} />
<span className="material-input"></span>
</div>
<div className="form-group label-floating is-empty">
<span className="material-input"></span>
</div>
<button type="submit" className="btn btn-fill btn-rose">Submit</button>
</form>

Answer 1

I can't be sure without the rest of the code, but it sounds like you are using Controlled Components without updating their values with the onChange callback.
When you set the value attribute it gets "binded" to the variable you set it to. For example, <input type="text" className="form-control" value={this.state.inventories} onChange={this.handleChange} />, the value of this input will be the value of this.state.inventories. If you don't update the latter you can't change the input value. To update this value you use the onChange callback, which is set as this.handleChange, but I'm not sure you wrote the method.
On the this.handleChange method you'll use setState to change the this.state.inventories value to the value being written in the form, something like this:
handleChange(event) {
this.setState({inventories: event.target.value});
}
EDIT:
Another thing to be noted: All the inputs are using the same callback to update their values, so you can't just add this.setState({state: event.target.value}); for each one, because event.target.value will be set to the value of the input being edited when the callback is fired. You need a conditional to check which input is being edited.
One of the ways to do it is to add a name to the input and check it through event.target.name in the onChange callback. As I advised in the comment, you should read the ReactJS documentation on forms.