add and remove index of form array similar to query builder - reactjs

Question

I have a form with three input box and a map method so when I enter to add it create the same form below the button when I remove the specific index then it removes the last index, not that specific one although it shows correct data in the console.
const [formData, setFormData] = useState({
wk: [
{
companyName: "",
reasonForChange: "",
role: ""
}
]
});
const [wkArray, setWkArray] = useState([1]);
you can test the whole code with this URL - https://codesandbox.io/s/angry-star-08hyke?file=/src/App.js

Answer 1

You had to bind the input values with the state so they can be updated when re-rendering according to the state change. So the input should look like:
<input
placeholder="company name"
value={item.companyName}
onChange={(e) => {
let temp = [...formData?.wk];
temp[index].companyName = e?.target?.value;
setFormData({ ...formData, wk: temp });
}}
/>
Here's the working code.
import "./styles.css";
import { useState } from "react";
export default function App() {
const [formData, setFormData] = useState({
wk: [
{
companyName: "",
reasonForChange: "",
role: ""
}
]
});
const [wkArray, setWkArray] = useState([1]);
return (
<>
{console.log(wkArray, formData)}
<button
onClick={() => {
setWkArray([...wkArray, Math.floor(Math.random() * 100)]);
setFormData({
...formData,
wk: [
...formData?.wk,
{
companyName: "",
role: "",
reasonForChange: ""
}
]
});
}}
>
Add
</button>
{formData.wk?.map((item, index) => {
return (
<div key={index} style={{ display: "flex" }}>
{formData.wk?.length >= 1 && (
<button
onClick={(e) => {
setWkArray(
wkArray.filter((_, i) => {
return i !== index;
})
);
setFormData({
wk: formData.wk.filter((_, i) => i !== index)
});
}}
>
X
</button>
)}
<div>
<input
placeholder="company name"
value={item.companyName}
onChange={(e) => {
let temp = [...formData?.wk];
temp[index].companyName = e?.target?.value;
setFormData({ ...formData, wk: temp });
}}
/>
</div>
<div>
<input
placeholder="reason for change"
value={item.reasonForChange}
onChange={(e) => {
let temp = [...formData?.wk];
temp[index].reasonForChange = e?.target?.value;
setFormData({ ...formData, wk: temp });
}}
/>
</div>
<div>
<input
placeholder="role"
value={item.role}
onChange={(e) => {
let temp = [...formData?.wk];
temp[index].role = e?.target?.value;
setFormData({ ...formData, wk: temp });
}}
/>
</div>
</div>
);
})}
</>
);
}
You can see the live demo here: https://codesandbox.io/s/amazing-fermat-jtpcli?file=/src/App.js
I have made some minor changes to improve the code.