rendering a dynamic form in a MERN stack app - react-hooks

Question

I am trying to render a dynamic form - instead of having 10 input fields, I would like to have 2 or 3 as default, and the user when clicks add icon will render an extra input field. My problem is that when I do that how do I keep track of the ingredient number and put a stop when it reaches ingredient10. Note: I do not have the add icon added into my code base, but I will add it as a button icon with an onClick function
const [addCocktail, setAddCocktail] = useState({
title: "",
type_of_drink: "",
glass: "",
tags: "",
ingredient1: "",
ingredient2: "",
ingredient3: "",
ingredient4: "",
ingredient5: "",
ingredient6: "",
ingredient7: "",
ingredient8: "",
ingredient9: "",
ingredient10: "",
preparation: "",
selectedFiles: "",
});
<TextField
name="ingredient1"
variant="outlined"
label="Ingredient"
fullWidth
value={addCocktail.ingredient1}
onChange={(e) =>
setAddCocktail({ ...addCocktail, ingredient1: e.target.value })
}
/>
<TextField
name="ingredient2"
variant="outlined"
label="Ingredient"
fullWidth
value={addCocktail.ingredient2}
onChange={(e) =>
setAddCocktail({ ...addCocktail, ingredient2: e.target.value })
}
/>
<TextField
name="ingredient3"
variant="outlined"
label="Ingredient"
fullWidth
value={addCocktail.ingredient3}
onChange={(e) =>
setAddCocktail({ ...addCocktail, ingredient3: e.target.value })
}
/>
<TextField
name="ingredient4"
variant="outlined"
label="Ingredient"
fullWidth
value={addCocktail.ingredient4}
onChange={(e) =>
setAddCocktail({ ...addCocktail, ingredient4: e.target.value })
}
/>
<TextField
name="ingredient5"
variant="outlined"
label="Ingredient"
fullWidth
value={addCocktail.ingredient5}
onChange={(e) =>
setAddCocktail({ ...addCocktail, ingredient5: e.target.value })
}
/>
<TextField
name="ingredient6"
variant="outlined"
label="Ingredient"
fullWidth
value={addCocktail.ingredient6}
onChange={(e) =>
setAddCocktail({ ...addCocktail, ingredient6: e.target.value })
}
/>
<TextField
name="ingredient7"
variant="outlined"
label="Ingredient"
fullWidth
value={addCocktail.ingredient7}
onChange={(e) =>
setAddCocktail({ ...addCocktail, ingredient7: e.target.value })
}
/>
<TextField
name="ingredient8"
variant="outlined"
label="Ingredient"
fullWidth
value={addCocktail.ingredient8}
onChange={(e) =>
setAddCocktail({ ...addCocktail, ingredient8: e.target.value })
}
/>
<TextField
name="ingredient9"
variant="outlined"
label="Ingredient"
fullWidth
value={addCocktail.ingredient9}
onChange={(e) =>
setAddCocktail({ ...addCocktail, ingredient9: e.target.value })
}
/>
<TextField
name="ingredient10"
variant="outlined"
label="Ingredient"
fullWidth
value={addCocktail.ingredient10}
onChange={(e) =>
setAddCocktail({ ...addCocktail, ingredient10: e.target.value })
}
/>

Answer 1

Dynamically generating fields can be done relatively simply with state.
I made a quick example where you get 3 default fields and can add fields with a button up to a max of 10. Please forgive the lack of styling.
import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Button, TextField } from "#material-ui/core";
import { Add } from "#material-ui/icons";
const maxInputFields = 10;
const defaultNumberOfFields = 3;
function App() {
const [numberOfFields, setNumberOfFields] = useState(defaultNumberOfFields);
function generateInputField(ingredientNum) {
return (
<div>
<TextField variant="outlined" label={`Ingredient ${ingredientNum}`} />
</div>
);
}
function generateFields() {
let listOfFields = [];
for (let i = 1; i <= numberOfFields; i++) {
listOfFields.push(generateInputField(i));
}
return listOfFields;
}
function handleButtonClick() {
if (numberOfFields < maxInputFields) setNumberOfFields(numberOfFields + 1);
}
return (
<div>
{generateFields()}
{numberOfFields < maxInputFields && (
<Button
variant="contained"
color="primary"
onClick={handleButtonClick}
>
<Add />
</Button>
)}
</div>
);
}