如何将输入值匹配到 a.map function 从 api 提取数据

Question

I have a.map function displaying data that is being pulled from an api, I would like to add a field to the data and have it match to the relevant piece of data.

Fo example I am pulling ingredients from an api that contains quantities, I would like to add an input field that would allow me to add a multiplier that I could later use to multiply the ingredients.

Here is the.map function:

 <div className="mt-4 border-t border-b border-gray-200 divide-y divide-gray-200">
              {data.ingredients.map((ingredient) => (
                <div
                  key={ingredient.id}
                  className="relative flex items-start py-4"
                >
                  <div className="ml-4 flex items-center h-5">
                    <input
                      onChange={selectIngredient(ingredient.id)}
                      value={selectedIngredients.indexOf(ingredient.id === -1)}
                      type="checkbox"
                      className="focus:ring-purple-500 h-4 w-4 text-purple-600 border-gray-300 rounded"
                    />
                  </div>

                  <div className="ml-3 text-sm">
                    <label
                      className="font-medium text-gray-700 select-none"
                    >
                      {ingredient.name}
                    </label>
                  </div>
                  <div className="ml-3 text-sm">
                  // Here I am using useState to set a multiplier, but it sets the same vale for all data in the .map list.
                    <input
                      value={multiplier}
                      onChange={(e) => setMultiplier(e.target.value)}
                      type="number"
                      className="flex-1 focus:ring-purple-500 focus:border-purple-500 block w-full min-w-0 rounded-md sm:text-sm border-gray-300"
                    />
                  </div>
                </div>
              ))}
            </div>

Here's what an ingredient object looks like:

ingredient: {
id: 1,
name: sugar,
quantity: 100,
quantityUnit: grams,
}

Is there a way I set an piece of state that is linked to the relevant mapped piece of data?

Answer 1

In your component, create a new state. Let's call this the ingredients state that has a setIngredients dispatcher. Set it by default as an empty array.

const [ingredients, setIngredients] = useState([]);

With a useEffect hook, loop over the received data with the .map() method and return a new object from each ingredient with a multiply property added. Update the ingredients state with this new array of objects.

useEffect(() => {
  if (data.length) {
    setIngredients(
      data.map(ingredient => ({
        ...ingredient,
        multiply: 1
      })
    );
  }
}, [data]);

Now your ingredients state has all ingredients plus a multiply property for each ingredient.