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?
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.
Just to be sure, I've added this piece of (psuedo)code to demonstrate how the solution should work.
Every ingredient now has a multiply property, by default set to 1. In your form you add a new input which handles the multiply value. The user is able to use the input to change the multiplication.
If needed, you could also add hidden input which tracks the total quanity of an ingredient (quantity * multiply). This might come in handy when you submit your form.
const handleMultiplyChange = (event, id) => {
const value = Number(event.value)
const updatedIngredients = ingredients.map(ingredient => ({
...ingredient,
multiply: ingredient.id === id ? value : ingredient.multiply
}));
setIngredients(updatedIngredients);
};
return (ingredients.map(ingredient => (
<>
<input
type="checkbox"
name="ingredient"
value={ingredient.id}
/>
<input
type="number"
name="multiply"
min="1"
value={ingredient.multiply}
onChange={(event) => handleMultiplyChange(event, ingredient.id)}
/>
<input
type="hidden"
name="totalQuantity"
value={(ingredient.multiply * ingredient.quantity)}
/>
</>
));