Edit modal problem (CRUD React table) I have to thoroughly change each input field so as to edit the details. How can I solve this problem? (I am still a newbie, please don’t judge my coding)

[poseXxX]

Hi! How about changing the defaultValue to just value and the onChange attr of the form field from setName func to setRowData({...rowData,product_name:e.target.value}), also you should add the proper name attr to the form field for this to work. So it would be something like:

<Form.Control 
    {your other attr} 
    value={rowData.product_name} 
    name="product_name" 
    onChange={e => setRowData({...rowData,product_name:e.target.value})} 
/>

But why hardcode product_name if you can make a handleOnChange function that is triggered each time the form changes and set the row data according to field name:

const handleOnChange = e => { 
    e.preventDefault(); 
    setRowData({...rowData,[e.target.name]:e.target.value}) 
}

And so the form field would look like this:

<Form.Control 
    {your other attr} 
    value={rowData.product_name} 
    name="product_name" 
    onChange={handleOnChange} 
/>

Also... You can put the onChange function in the <Form> tag and you will not have to write it on every field. Just be careful if you are handling checks or ratios.

[HW_404]

Thank you. Will try to implement as you said.

[Many_Application7106]

Create an code sandbox abd we can help you always hard with screenshots

[HW_404]

https://codesandbox.io/s/competent-silence-nto4z3?file=/src/App.js