I'm running into a problem!

Asalam-u-Alikum Kevin sir !! I’m going through a problem from 2,3 days and don’t how to figure… finally I decided to text you … Can you please help me?

Sure, what do you need help with? Provide a link to the challenge/whatever and show us the code you’ve tried.

Sir !! I’m not into any challenge … I’m working on a project and facing some issue …
let me explain:
I have a database like fooditems and entities are:
Item Name: Burger
itemID: 1
itemPrice: 200
and 2,3 more entries like that !!

So, whenever … I enter itemID into the input field it will display relevant data against the itemID that I entered into the input field…

When I enter itemID into the field and hit the button … the relevant data get’s enter into the table …

Now the problem is:
When I enter 1 more item into table … it replaces the old one

Now when I enter 1 more item and hit the plus button … it will replace the old data with new one like that :

Here’s the source code of Khan Burger Bill (Invoice component)

import React, { Component } from "react";
// import { Invoice } from "./OrderForm";
import axios from "axios";

class InvoiceToPrint extends Component {
  constructor(props){
    super(props)
     const product = this.props.ProductID;
     console.log('Two')
    console.log(product);
    console.log('three');
  }
  
  state = {
    itemData: [],
  };
  componentDidMount() {
    axios
      .get("http://localhost:9000/khan-burger/list.php")
      .then((res) => {
          this.setState({ itemData: res.data });
          console.log(this.state.itemData);
        //  const responseData = this.state.itemData;
        //  console.log(responseData.filter(item=>item.itemID === '3'))
        //  console.log(responseData);
      })

      .catch((error) => {
        console.log(error);
      });

  }

  render() {
    const PRODUCT = this.props.ProductID;
    const date = new Date();
    return (
      <>
        <div>
          <div className="row">
            <div className="col-6">
              <h4>
                <i className="fas fa-globe" />
                <br />
                Khan Burger Bill
                <p>{PRODUCT}</p>
                <br />
                <small className="me-right">Date: {date.toDateString()}</small>
              </h4>
            </div>
            {/* /.col */}
          </div>
          {/* Table row */}
          <div className="row">
            <div className="col-12 table-responsive">
              <table className="table table-striped">
                <thead>
                  <tr>
                    {/* <th>Qty</th> */}
                    <th>Product</th>
                    <th>item ID#</th>
                    <th>Price</th>
                  </tr>
                </thead>
                <tbody>
              
                  {this.state.itemData.filter(item=>item.itemID === PRODUCT).map((item, index) => (
                    <tr key={index}>
                      <td>{item.itemName}</td>
                      <td>{item.itemID}</td>
                      <td>{item.itemPrice}</td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
            {/* /.col */}
          </div>
          {/* /.row */}
          <div className="row">
            {/* accepted payments column */}
            <div className="col-6">
              <p className="lead">
                {" "}
                <b>Address:</b>{" "}
              </p>
              <p>580-Nishter Block Allama Iqbal town Lahore</p>
              <p className="lead">
                {" "}
                <b>Contact:</b>{" "}
              </p>
              <p>03227866019</p>
            </div>
            {/* /.col */}
            <div className="col-6">
              <div className="table-responsive">
                <table className="table">
                  <tbody>
                    <tr>
                      <th style={{ width: "70%" }}>Subtotal:</th>
                      <td>$250.30</td>
                    </tr>
                    <tr>
                      <th>Delivery:</th>
                      <td>$5.80</td>
                    </tr>
                    <tr>
                      <th>Total:</th>
                      <td>$265.24</td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
            {/* /.col */}
          </div>
        </div>
      </>
    );
  }
}

You can spread the old values before adding the new ones.

I will check the post bro … but the thing is … I can’t figure out my problem from the post !!

You’ve asked me to take a look at this. I agree with what lasjorg is saying.

You are only keeping one item in state. When you do a new one, you completely overwrite that with the new one. Did you instead want to keep an array? This gets to what lasjorg is talking about. You would keep an array and map over that array.

Does that make sense? Are you trying to do something different?

Sir I want to filter the data and keep that data filtered…
but the problem is ::
data get replace with new entered data !!

Yes, and I think we’ve explained why we think the data is getting overwritten.

Do you have a repo for this?