How to access table cell data in react - reactjs

Question

I have created a cart using reactjs and now I pass an object into the cart and I can add quantity and then I will be calculated automatically subtotal of a product. But now I have to calculate Total using this subtotal value. So Can I know how to access table column 'subtotal' and calculate the total price of products purchased?
I have attached the table below.
render(){
const subtot =this.DrugsDetailsRequest.totalPrice*this.state.textInputValue1
console.log(subtot);// this will get you the total
const sum=sum+subtot;
console.log(sum);
return (
<tr>
<td data-th="Product">
<p>{this.DrugsDetailsRequest.item_name}</p>
</td>
<td> Rs: {this.DrugsDetailsRequest.totalPrice}</td>
<td>
<input name="textInputValue1" type="number" className="form-control text-center" onChange={ this.handleChange } />
</td>
<td className="text-center">
<input name="textInputValue2" type="text" className="form-control text-center" value={subtot}
onChange={ this.handleChange } />
</td>
<td className="actions">
<button className="btn btn-danger btn-sm" onClick={(e) => this.delete(this.DrugsDetailsRequest._id)}>Delete</button>
</td>
</tr>
);
}
}
enter image description here

Answer 1

This is one solution for you: Using Refs
For more information, you could read it here: Refs and the DOM
This is the example which looks closely to what you are in need.
class CustomTextInput extends React.Component {
constructor(props) {
super(props);
// create a ref to store the textInput DOM element
this.textInput = React.createRef();
this.focusTextInput = this.focusTextInput.bind(this);
}
focusTextInput() {
// Explicitly focus the text input using the raw DOM API
// Note: we're accessing "current" to get the DOM node
this.textInput.current.focus();
}
render() {
// tell React that we want to associate the <input> ref
// with the `textInput` that we created in the constructor
return (
<div>
<input
type="text"
ref={this.textInput} />
<input
type="button"
value="Focus the text input"
onClick={this.focusTextInput}
/>
</div>
);
}
}

Answer 2

in react, you should try to make your UI rendering controled by the react's state.
in your case, if you want to access the subtotal, then you might design your component state like this:
class Cart extends React.Component {
constructor(props) {
super(props);
// initial cart state
this.state = {
total: 0,
inCartItems: {
ddd: {
price: 12,
quantity: 0,
subtotal: 0,
},
www: {
price: 45,
quantity: 0,
subtotal: 0,
},
e3400: {
price: 45,
quantity: 0,
subtotal: 0,
},
},
};
}
handleChange = (itemName, quantity) => {
// set new inCartItems state
// then use the updated state to calculate total by just sum up the subtotal in each items
}
render() {
return (
// your table content
<div>
{/*handle item number change like this*/}
<input onChange={(e) => this.handleChange('ddd', e.target.value)} />
<input onChange={(e) => this.handleChange('www', e.target.value)} />
<input onChange={(e) => this.handleChange('e3400', e.target.value)} />
<div className={'total'}>
{this.state.total}
</div>
</div>
// ....
);
}
}