How to resolve overlapping data from mapped input rows in JavaScript?

I have a React form that involves collecting data from an API and processing it, I fetch the items from an API then map through it to create a form for each object, so my user can input a price. The user is supposed to be able to set the price of multiple items for processing.

My problem is from the search feature, I filter through the objects to implement a search feature. However, if I set the price of the first item, then filter the list so the first item is gone. The price of the first item remains in the first input, so the prices appear mismatched.

They aren’t mismatched though as the object that I am using to record the data is still accurate, it just looks very confusing visually.

I have recreated my error in this sandbox.

Answer

The problem is you never set the value of your price input field.

<input
  type="number"
  onChange={(e) => handleFormData(item.name, e.target.value)}
/>

As there is no value passed to the input it will lose it’s value once it is unmounted. That’s what is happening with you. When it unmounts it lose it’s value.

Solve to the problem

<input
  type="number"
  value={formData[item.name]}
  onChange={(e) => handleFormData(item.name, e.target.value)}
/>

But please use unique identifier to identify other than the name. Because it might conflict. And it is conflicting for sarah

code link – https://codesandbox.io/s/musing-satoshi-q1g52?file=/src/App.js