How to get values and add them to dynamic form fields? - reactjs

Question

I have created a form that can add fields dynamically(add more). I need to auto populate data that is taken through an id of a select field and add them into some input fields. problem is I am getting the expected result but not getting the value added to those specific data fields. It auto populated every dynamic field that is created relevant to its attribute name.
Here's my states
const [productSelectedList, setproductSelectedList] = useState([])
const [inputList, setInputList] = useState({
user_id: '',
agent_id: '',
tonnes_complete: '',
dockets_complete: '',
customer_id: '',
customer_address: '',
spreading_unit: '',
payment_method: '',
spread_completed_data: '',
spread_rate: '',
payment_status: '',
order_status: '',
order_list: [
{
docket_number: '',
operator_id: '',
product_id: '',
product_mix_id: '',
product_docket: '',
quantity: '',
quantity_rate: '',
spread_status: '',
driver_comments: '',
},
],
})
Here's my onchange and how i am selecting the data from an api
const handleChangeProductMix = (e, index) => {
const { name, value } = e.target
const list = { ...inputList } //<-- object, not array
list.order_list[index][name] = value
const product_mix_id = list.order_list[index][name]
axios.get(`api/edit_product_mix/${product_mix_id}`).then((res) => {
if (res.data.status === 200) {
setproductSelectedList(res.data.product_mix)
} else if (res.data.status === 404) {
swal('Error', res.data.message, 'error')
history.push('/products/productmix')
}
})
setInputList(list)
console.log(productSelectedList)
}
const handleChange = (e, index) => {
const { name, value } = e.target
const list = { ...inputList } //<-- object, not array
console.log(list)
list.order_list[index][name] = value
setInputList(list)
}
and here's my input field
<div className="col-lg-4 mb-2">
<div className="form-group">
<label className="pb-2">Product Mix Name</label>
<input className="form-control" type="text" name="product_docket" onChange={(e)=> handleChange(e, i)}
value={productSelectedList.product_docket}
placeholder="Select Customer Code"
/>
</div>
</div>
When the auto populated data is added and when i click add more the data is being duplicated and replaced with recently selected option.
here's how i add fields dynamically
const handleAddInput = (e) => {
e.preventDefault()
setInputList({
...inputList,
order_list: [
...inputList.order_list,
{
docket_number: '',
operator_id: '',
product_id: '',
product_mix_id: '',
product_docket: '',
quantity: '',
quantity_rate: '',
spread_status: '',
driver_comments: '',
},
],
})
}

Answer 1

You are directly modifying React state with these lines in handleChange and handleChangeProductMix:
const list = { ...inputList } //<-- object, not array
list.order_list[index][name] = value
You need to deep clone the inputList state instead, so that you are not directly modifying one of the values on a property of one of the objects in the array on inputList.order_list.
Here are a few different ways to do it:
JSON.parse:
const list = JSON.parse(JSON.stringify(inputList));
Spread syntax (like in handleAddInput):
const list = {
...inputList,
order_list: inputList.order_list.map(o => ({...o})),
};
A simple clone function:
/**
* This is a naive clone implementation, only meant to be used with
* plain objects/arrays and scalar values.
*/
function clone (value) {
if (typeof value !== 'object') return value;
if (value === null) return value;
if (Array.isArray(value)) return value.map(v => clone(v));
return Object.fromEntries(Object.entries(value).map(([k, v]) => [k, clone(v)]));
}
const list = clone(inputList);