title: How to dynamically add/delete table rows in ReacjJS
body: <p>I am trying to dynamically add and delete <code>table</code> rows using <code>ReactJS</code>.
  But the problem is once I added few rows, the values in each column in each rows are the same even if I change them randomly.</p>
  
  <p>Below screen shot will clarify further of my problem.</p>
  
  <p><a href="https://i.stack.imgur.com/cUV6t.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cUV6t.png" alt="screenshot"></a></p>
  
  <p>The steps of what I am trying to do is:</p>
  
  <p>1) Select an <code>item</code> from the dropdown</p>
  
  <p>2) Enter the <code>qty</code> </p>
  
  <p>3) Press <code>+</code> button </p>
  
  <p><strong>It works, but the next time I try to select an item or enter the quantity for an item, it <code>updates every column</code></strong></p>
  
  <p>This is my code sample:</p>
  
  <pre><code>import React, { Component } from "react";
  import {
    MDBRow,
    MDBCol,
    MDBCard,
    MDBCardBody,
    MDBMask,
    MDBIcon,
    MDBView,
    MDBBtn,
    MDBTable,
    MDBTableBody,
    MDBTableHead,
    MDBContainer
  } from "mdbreact";
  import { NavLink } from "react-router-dom";
  
  import GetTable from "./table";
  import GetTable2 from "./table2";
  
  export default class CreateInvoiceForm extends Component {
    constructor(props) {
      super(props);
      this.state = {
        vendorName: "",
        itemID: "",
        qty: "",
        rows: [{}]
      };
  
      this.onSubmit = this.onSubmit.bind(this);
      this.vendorOnChange = this.vendorOnChange.bind(this);
      this.itemorOnChange = this.itemorOnChange.bind(this);
      this.quantityOnChange = this.quantityOnChange.bind(this);
      this.onHandleAddRow = this.onHandleAddRow.bind(this);
    }
  
    onHandleAddRow() {
      const itemDetails = {
        itemID: this.state.itemID,
        itemName: "",
        qty: this.state.qty,
        unitPrice: "",
        linePrice: ""
      };
  
      this.setState({
        rows: [...this.state.rows, itemDetails]
      });
    }
  
    onSubmit(e) {
      e.preventDefault();
      alert(this.state.vendorName);
    }
  
    vendorOnChange(e) {
      this.setState({
        vendorName: e.target.value
      });
    }
  
    quantityOnChange(e) {
      this.setState({
        qty: e.target.value
      });
    }
  
    itemorOnChange(e) {
      this.setState({
        itemID: e.target.value
      });
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;MDBCard className="my-12 px-12 pb-12"&gt;
            &lt;MDBCardBody className=""&gt;
              &lt;h2 className="h1-responsive font-weight-bold text-center my-5"&gt;
                Create a Purchase Invoice
              &lt;/h2&gt;
              &lt;p className="text-center w-responsive mx-auto mb-5"&gt;
                Creating purchase invoices
                &lt;strong&gt;Without having a Purchase Order&lt;/strong&gt;
              &lt;/p&gt;
  
              {/* form starts here */}
              &lt;form onSubmit={this.onSubmit}&gt;
                &lt;MDBRow&gt;
                  &lt;MDBCol lg="6" md="6" className="mb-lg-0 mb-6"&gt;
                    &lt;p className="h6 mb-4"&gt;
                      {" "}
                      &lt;i className="fa fa-info-circle"&gt;&lt;/i&gt; Invoice Details
                    &lt;/p&gt;
                    &lt;label
                      htmlFor="defaultFormRegisterNameEx"
                      className="grey-text"
                    &gt;
                      Invoice No:
                    &lt;/label&gt;
                    &lt;input
                      type="text"
                      id="defaultFormRegisterNameEx"
                      className="form-control"
                    /&gt;
                    &lt;br /&gt;
                    &lt;label
                      htmlFor="defaultFormRegisterEmailEx"
                      className="grey-text"
                    &gt;
                      Vendor
                    &lt;/label&gt;
                    &lt;div class="form-group"&gt;
                      &lt;select
                        class="form-control"
                        id="exampleSelect1"
                        onChange={this.vendorOnChange}
                      &gt;
                        &lt;option disabled selected&gt;
                          - Select vendor -{" "}
                        &lt;/option&gt;
                        &lt;option value="2"&gt;2&lt;/option&gt;
                        &lt;option value="3"&gt;3&lt;/option&gt;
                        &lt;option value="4"&gt;4&lt;/option&gt;
                        &lt;option value="5"&gt;5&lt;/option&gt;
                      &lt;/select&gt;
                    &lt;/div&gt;
  
                    &lt;label
                      htmlFor="defaultFormRegisterConfirmEx"
                      className="grey-text"
                    &gt;
                      Invoice Date:
                    &lt;/label&gt;
                    &lt;input
                      type="date"
                      id="defaultFormRegisterConfirmEx"
                      className="form-control"
                    /&gt;
                    &lt;br /&gt;
                    &lt;label
                      htmlFor="defaultFormRegisterPasswordEx"
                      className="grey-text"
                    &gt;
                      Expected Delievery Date:
                    &lt;/label&gt;
                    &lt;input
                      type="date"
                      id="defaultFormRegisterPasswordEx"
                      className="form-control"
                    /&gt;
                  &lt;/MDBCol&gt;
                  &lt;MDBCol lg="6" md="6" className="mb-lg-0 mb-6"&gt;
                    &lt;p className="h6 mb-4"&gt;
                      {" "}
                      &lt;i className="fa fa-truck"&gt;&lt;/i&gt; Delievery Details
                    &lt;/p&gt;
                    &lt;label
                      htmlFor="defaultFormRegisterNameEx"
                      className="grey-text"
                    &gt;
                      Billing Address
                    &lt;/label&gt;
                    &lt;textarea className="form-control"&gt; &lt;/textarea&gt;
  
                    &lt;label
                      htmlFor="defaultFormRegisterEmailEx"
                      className="grey-text"
                    &gt;
                      Contact Person:
                    &lt;/label&gt;
                    &lt;input
                      type="text"
                      id="defaultFormRegisterEmailEx"
                      className="form-control"
                    /&gt;
                    &lt;br /&gt;
                    &lt;label
                      htmlFor="defaultFormRegisterConfirmEx"
                      className="grey-text"
                    &gt;&lt;/label&gt;
                    &lt;input
                      hidden
                      type="email"
                      id="defaultFormRegisterConfirmEx"
                      className="form-control"
                    /&gt;
                    &lt;br /&gt;
                    &lt;label
                      htmlFor="defaultFormRegisterPasswordEx"
                      className="grey-text"
                    &gt;&lt;/label&gt;
                    &lt;input
                      hidden
                      type="password"
                      id="defaultFormRegisterPasswordEx"
                      className="form-control"
                    /&gt;
                    &lt;br /&gt;
                    &lt;br /&gt;
                    &lt;br /&gt;
                    &lt;br /&gt;
                    &lt;br /&gt;
                    &lt;br /&gt;
                  &lt;/MDBCol&gt;
                &lt;/MDBRow&gt;
                &lt;hr /&gt;
                {/* new row======================================================= */}
  
                &lt;MDBRow&gt;
                  &lt;MDBCol lg="5" md="5" className="mb-lg-0 mb-5 text-center"&gt;
                    &lt;div class="form-group"&gt;
                      &lt;label
                        htmlFor="defaultFormRegisterEmailEx"
                        className="grey-text"
                      &gt;
                        Select an Item:
                      &lt;/label&gt;
                      &lt;select class="form-control" onChange={this.itemorOnChange}&gt;
                        &lt;option disabled selected&gt;
                          - Select Item -
                        &lt;/option&gt;
                        &lt;option value="2"&gt;2&lt;/option&gt;
                        &lt;option value="3"&gt;3&lt;/option&gt;
                        &lt;option value="4"&gt;4&lt;/option&gt;
                        &lt;option value="5"&gt;5&lt;/option&gt;
                      &lt;/select&gt;
                    &lt;/div&gt;
                  &lt;/MDBCol&gt;
                  &lt;MDBCol lg="5" md="5" className="mb-lg-0 mb-5 text-center"&gt;
                    &lt;div class="form-group"&gt;
                      &lt;label
                        htmlFor="defaultFormRegisterEmailEx"
                        className="grey-text"
                      &gt;
                        Quantity:
                      &lt;/label&gt;
                      &lt;input
                        type="text"
                        id="defaultFormRegisterEmailEx"
                        className="form-control"
                        onChange={this.quantityOnChange}
                      /&gt;
                    &lt;/div&gt;
                  &lt;/MDBCol&gt;
                  &lt;MDBCol lg="2" md="2" className="mb-lg-0 mb-2 text-center"&gt;
                    &lt;div className="form-group"&gt;
                      &lt;label
                        htmlFor="defaultFormRegisterEmailEx"
                        className="grey-text"
                      &gt;&lt;/label&gt;
                      &lt;button
                        style={{ height: "40px" }}
                        name="subject"
                        type="button"
                        className="btn btn-success btn-sm form-control"
                        onClick={this.onHandleAddRow}
                      &gt;
                        &lt;i className="fa fa-plus fa-lg"&gt;&lt;/i&gt;
                      &lt;/button&gt;
                    &lt;/div&gt;
                  &lt;/MDBCol&gt;
                &lt;/MDBRow&gt;
  
                &lt;MDBRow&gt;
                  &lt;MDBCol lg="12" md="12" className="mb-lg-0 mb-12 text-center"&gt;
                    &lt;MDBTable
                      className="container-fluid"
                      striped
                      bordered
                      hover
                      responsive
                    &gt;
                      &lt;MDBTableHead color="primary-color" textWhite&gt;
                        &lt;tr&gt;
                          &lt;th&gt;Item ID&lt;/th&gt;
                          &lt;th&gt;Item Name&lt;/th&gt;
                          &lt;th&gt;Qty&lt;/th&gt;
                          &lt;th&gt;Unit Price (R.s)&lt;/th&gt;
                          &lt;th&gt;Line Price (R.s)&lt;/th&gt;
                          &lt;th&gt;&lt;i className="fa fa-cog"&gt;&lt;/i&gt;&lt;/th&gt;
                        &lt;/tr&gt;
                      &lt;/MDBTableHead&gt;
                      &lt;MDBTableBody&gt;
  
                          {this.state.rows.length &gt; 1
                          ? this.state.rows.map((item, id) =&gt; (
                            &lt;tr key={id}&gt;
                              &lt;td&gt;{this.state.itemID}&lt;/td&gt;
                              &lt;td&gt;{this.state.itemID}&lt;/td&gt;
                              &lt;td&gt;{this.state.qty}&lt;/td&gt;
                              &lt;td&gt;price&lt;/td&gt;
                              &lt;td&gt;Line&lt;/td&gt;
                              &lt;MDBBtn&gt;&lt;i className="fa fa-times"&gt;&lt;/i&gt;&lt;/MDBBtn&gt;
                            &lt;/tr&gt;
                          ))
                          : &lt;tr&gt;&lt;/tr&gt;
                          }
                      &lt;/MDBTableBody&gt;
                    &lt;/MDBTable&gt;
                  &lt;/MDBCol&gt;
                &lt;/MDBRow&gt;
              &lt;/form&gt;
              {/* form ends here */}
            &lt;/MDBCardBody&gt;
          &lt;/MDBCard&gt;
          &lt;br /&gt;
          &lt;MDBContainer&gt;
            &lt;MDBRow&gt;
              &lt;MDBCol className="col-12 col-md-12 text-center"&gt;
                &lt;GetTable2 /&gt;
              &lt;/MDBCol&gt;
            &lt;/MDBRow&gt;
          &lt;/MDBContainer&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Can someone please help me?</p>