React JS add dynamic object values from FORM to objects

Question

I have array of objects where i need to an key value

State :

const [row, setRow] = useState([{ nameofthework: "", schedulerefNo: "", unitprice: "", qty: "", uom: "", gst: "", total: "" }]);

The form input change function

const handleInputChange = (e, index) => {
    const { name, value } = e.target;
    const list = [...row];
    list[index][name] = value;
    setRow(list);
    console.log(row);  // Prints out the each row object into and array of objects
};

const handleQty = (e) => {
    const scheduleNumberForQuantity = e.target.value;
    projectScheduleNumber?.filter((v) => {
        if(v["Schedule No"] === scheduleNumberForQuantity ) {
            setScheduleQuantity(v["LOA Qty"]); // return only integer example 1000
        }
    })
}

My Form

<Form.Control as="select" name="schedulerefNo" value={x.schedulerefNo} onChange={e => {handleInputChange(e, i); handleQty(e)}}>

How to add handleQty value to row state ?

score 0 · Answer 1 · answered Mar 29 '21 at 10:52

0

Same way as in the handleInputChange?

const list = [...row];
const item = list[index];
if (item) {
  item.qty = e.target.value;
  setRow(list);
}

Also in React it is not good practice to mutate data. You should rather create new list with the updated item.

Whats the best way to update an object in an array in ReactJS?

answered Mar 29 '21 at 10:52

Miroslav Papírník

709
5
17

how do push the new object key value inside the row object ? – Deepak Murthy Mar 29 '21 at 11:08
Just add it to your's item before calling setState (setRow) function. e.g. `item.myNewProperty = true` – Miroslav Papírník Mar 29 '21 at 13:42
Or better is to create a new object `const newItem = { ...item, myNewProperty: true };` and than replace it in list `list[index] = newItem;` – Miroslav Papírník Mar 29 '21 at 14:42

React JS add dynamic object values from FORM to objects

1 Answers1