There is a list of let's say animals. I have them all set in MongoDB and receive them through redux actions with await axios.get("/api/getanimals") then i map them with (I removed all classes from code snippet just to shorten the code)
{animalsList.map((item, i) => {
return (
<div key={i}>
<div>
<input
value={item.name}
onChange={(e) => handleAnimals(e, i)}
></input>
<input
value={item.category}
onChange={(e) => handleAnimals(e, i)}
/>
</div>
<div>
{animalsList.length !== 1 && (
<button
onClick={() => handleRemoveAnimals(i)}
>
Remove
</button>
)}
{animalsList.length - 1 === i && (
<button
onClick={handleAddAnimals}
>
Add
</button>
)}
</div>
</div>
)
})} It's mapping them perfectly like i wanted Input form and creating array (i can see it with JSON.stringify Array below the form), but now we get to the hard part.
How do i create form handler and api post request to update all edited inputs at once as separate objects in database like i receive them with await Animals.find({})? I also need to be able to add or remove new animals that's what those dynamic buttons with onClick are for.
