How to add form fields dynamically in react js - reactjs

Question

I want to add form fields dynamically.
I also want that on click the durationprice add dynamically and also a button to add dynamically full plan.
{ plan: [ { planname: "", description: "", cuisine: "", durationprice: [{duration: "",maximumduration: "", price: ""}]}]}
import React, {
Component,
useState
} from "react";
import DurationPrice from "./DurationandPrice";
import Rules from "./Rules";
const TOKEN = 'hello';
export function PlanForm() {
const [inputList, setInputList] = useState([{
planName: "",
description: "",
cuisine: "",
}, ]);
const handleChnage = (e, index) => {
const {
name,
value
} = e.target;
const list = [...inputList];
list[index][name] = value;
setInputList(list);
};
const handleInput = () => {
const list = [...inputList];
list.push({
planName: "",
description: "",
cuisine: ""
});
setInputList(list);
// setInputList([...inputList,{firstName:'',lastName:''}]);
};
const handleRemove = (index) => {
const list = [...inputList];
list.splice(index, 1);
setInputList(list);
};
const handleSubmit = (e) => {
e.preventDefault();
};
const handleSave = (e) => {
e.preventDefault();
console.log('button clicked');
fetch(`https://cosynest-api.herokuapp.com/api/plans/create`, {
method: 'POST',
body: JSON.stringify({
'duration': inputList.duration,
'maximumDuration': inputList.maximumDuration,
'price': inputList.price
}),
headers: new Headers({
Authorization: `Bearer ${TOKEN}`,
'content-type': 'application/json'
})
})
.then(response => response.json())
.then(console.log(inputList))
.then(localStorage.setItem('Token-CreateShop', TOKEN))
.catch(console.log('error'))
}
// debugger;
return ( <
div className = "plan-form" > {
inputList.map((item, i) => {
return ( <
form key = {
i
}
onSubmit = {
handleSubmit
} >
<
input type = "text"
name = "planName"
className = "mr-10 input "
placeholder = "Plan Name"
value = {
item.planName
}
onChange = {
(e) => handleChnage(e, i)
}
/> <
input type = "text"
name = "description"
className = "mr-10 input "
placeholder = "Description"
value = {
item.description
}
onChange = {
(e) => handleChnage(e, i)
}
/> <
input type = "cuisine"
onChange = {
(e) => handleChnage(e, i)
}
value = {
item.cuisine
}
className = "mr-10 input "
name = "cuisine"
placeholder = "Cuisine" /
>
<
h2 > Duration and Price < /h2> <
DurationPrice / >
<
br / >
<
div > {
inputList.length - 1 === i && ( <
button type = "button"
onClick = {
handleInput
}
className = "mr-10 btn"
value = "Add Plan" >
Add Plan <
/button>
)
} {
inputList.length !== 1 && ( <
button onClick = {
() => handleRemove(i)
}
className = "mr-10 btn-red"
value = "Remove Plan" >
Remove <
/button>
)
} <
/div>
<
/form>
);
})
} <
button onClick = {
handleSave
}
className = "btn-pink btn "
type = "submit" > Save PLANS < /button> {
/* <pre>
{JSON.stringify(inputList,null,3)}
</pre> */
} <
/div>
);
}
export default PlanForm;

Answer 1

you can use one state that will have all the formData states inside it and for the input elements you can use map to render
lets say you have to create form for these fields
let formElements = [{
label: "Name", // this is label
key: 'name' // this is unique key to be used as state name
}, {
label: "Phone number",
key: 'phone'
}, {
label: "House",
key: 'house'
}, {
label: "City",
key: 'city'
}, {
label: "State",
key: 'state'
}, {
label: "Country",
key: 'country'
}]
now you can create your component from this element something like this
export default function App() {
const [formData, setFormData] = useState({} as any);
const handleChange = (value: string, key: string) => {
setFormData({ ...formData, ...{ [key]: value } });
}
const submit = () => {
alert(JSON.stringify(formData))
}
return (
<form>
Form goes here
{formElements.map(formElement => {
return <div>
{formElement.label}
<input value={formData[formElement.key]}
onChange={(e) => { handleChange(e.target.value, formElement.key) }} />
</div>
})}
<button onClick={(e) => { e.preventDefault(); submit() }}>submit</button>
</form>
);
}
Now whenever you want to update the form fields just update your formElements Array.
in your case you can store formElements in state and update that like this
const [formElement,setFormElements] = useState([]);
useEffect(()=>{
setFormElements(formElement)
},[]);
// update your state with new element like this on button click
const updateFormElememt = (newElement)=>{
setFormElements([...formElements,...newElement])
}