CODEWITHSUNDEEP
reactjsaxios
Krishan DKM
Krishan DKM

Reputation: 29

How to access table cell data in react

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

Upvotes: 0

Views: 2159

Answers (2)

Jiachen Guo
Jiachen Guo

Reputation: 281

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>
    // ....
  );
}
}

Upvotes: 0

Tu Nguyen
Tu Nguyen

Reputation: 10179

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>
        );
      }
    }

Upvotes: 1

Related Questions