Creating an array of objects from react events - reactjs

Question

I am trying to create a new object for ingredient quantity measure for each new ingredient the user creates. I can make the object for 1 of the ingredient-triad divs but I am stumped about how to create several objects with different ingredients added by user eg.
ingredientList = [
{
ingredient_name: flour,
ingredient_quantity: 1,
ingredient_measure: cup
},
{
ingredient_name: water,
ingredient_quantity: 1,
ingredient_measure: tbsp
}
]
etc.
Here is where I have gotten to:
export default function Recipe() {
const [name, setName] = useState('')
const [method, setMethod] = useState('')
const [ingredient, setIngredient] = useState('')
const [ingredientyQty, setIngredientQty] = useState('')
const [ingredientMeasure, setIngredientMeasure] = useState('')
const ingredientList = []
const recipeIngredient = {
ingredient_name: ingredient,
quantity: ingredientyQty,
measure: ingredientMeasure,
}
ingredientList.push(recipeIngredient)
const sendRecipeName = function (e) {
e.preventDefault()
fetch('http://localhost:3001/recipe', {
method: 'POST',
headers: { 'Content-type': 'application/json' },
body: JSON.stringify({ name: name, method: method }),
})
.then((resp) => resp.json())
.then((json) => console.log(json))
}
return (
<div>
[...]
<div className="ingredient-triad">
<input
className="ingredient"
type="text"
onChange={(e) => setIngredient(e.target.value)}
></input>
<input
className="quantity"
type="text"
onChange={(e) => setIngredientQty(e.target.value)}
></input>
<select
className="dropdown"
name="measure"
id="measure"
onChange={(e) => setIngredientMeasure(e.target.value)}
>
<option value="cup">cup</option>
[...]
</select>
</div>
<div className="ingredient-triad">
<input
className="ingredient"
type="text"
onChange={(e) => setIngredient(e.target.value)}
></input>
<input
className="quantity"
type="text"
onChange={(e) => setIngredientQty(e.target.value)}
></input>
<select
className="dropdown"
name="measure"
id="measure"
onChange={(e) => setIngredientMeasure(e.target.value)}
>
<option value="cup">cup</option>
[...]
</select>
</div>
<div className="save-button-container">
<button className="save-recipe" onClick={(e) => sendRecipeName(e)}>
Submit Recipe
</button>
</div>
</form>
</div>
</div>
)
}

Answer 1

import React, { useState } from "react";
const init = {
ingredient_name: "",
quantity: "",
measure: ""
};
export default function App() {
const [ingredientList, setIngredientList] = useState([
{
ingredient_name: "",
quantity: "",
measure: ""
}
]);
const handleChange = (e, i) => {
const { name, value } = e.target;
setIngredientList((prevState) => {
const newIngredientList = [...prevState];
newIngredientList[i][name] = value;
return [...newIngredientList];
});
};
return (
<>
[...]
{ingredientList.map((list, i) => (
<div key={i} className="ingredient-triad">
<input
className="ingredient"
name="ingredient_name"
type="text"
value={list.ingredient_name}
onChange={(e) => handleChange(e, i)}
></input>
<input
className="quantity"
name="quantity"
type="text"
value={list.quantity}
onChange={(e) => handleChange(e, i)}
></input>
<select
className="dropdown"
name="measure"
id="measure"
value={list.measure}
onChange={(e) => handleChange(e, i)}
>
<option value="" disabled>
--none--
</option>
<option value="cup">cup</option>
</select>
<button onClick={() => setIngredientList((prev) => [...prev, init])}>
+
</button>
</div>
))}
[...]
</>
);
}
I think this is what you are looking for :)

Answer 2

Try this below code:
export default function Recipe() {
const [name, setName] = useState('')
const [method, setMethod] = useState('')
const [ingredientList, setIngredientList] = useState([])
const [ingredient, setIngredient] = useState('')
const [ingredientyQty, setIngredientQty] = useState('')
const [ingredientMeasure, setIngredientMeasure] = useState('')
console.log(ingredientList)
const sendRecipeName = function (e) {
e.preventDefault()
const recipeIngredient = {
ingredient_name: ingredient,
quantity: ingredientyQty,
measure: ingredientMeasure,
}
setIngredientList((prev) => [...prev, recipeIngredient])
fetch('http://localhost:3001/recipe', {
method: 'POST',
headers: { 'Content-type': 'application/json' },
body: JSON.stringify({ name: name, method: method }),
})
.then((resp) => resp.json())
.then((json) => console.log(json))
}
return (
<div>
[...]
<div className="ingredient-triad">
<input
className="ingredient"
type="text"
onChange={(e) => setIngredient(e.target.value)}
></input>
<input
className="quantity"
type="text"
onChange={(e) => setIngredientQty(e.target.value)}
></input>
<select
className="dropdown"
name="measure"
id="measure"
onChange={(e) => setIngredientMeasure(e.target.value)}
>
<option value="cup">cup</option>
[...]
</select>
</div>
<div className="ingredient-triad">
<input
className="ingredient"
type="text"
onChange={(e) => setIngredient(e.target.value)}
></input>
<input
className="quantity"
type="text"
onChange={(e) => setIngredientQty(e.target.value)}
></input>
<select
className="dropdown"
name="measure"
id="measure"
onChange={(e) => setIngredientMeasure(e.target.value)}
>
<option value="cup">cup</option>
[...]
</select>
</div>
<div className="save-button-container">
<button className="save-recipe" onClick={(e) => sendRecipeName(e)}>
Submit Recipe
</button>
</div>
</form>
</div>
</div>
)
}