I have a form with 3 input fields as sender, receiver, and message, form is inside for loop with a unique id:
now I want to update the state when entering form fields , my expected state like below
[
{id: 1, sender: "", receiver: "", message: ""},
{id: 2, sender: "", receiver: "", message: ""},
{id: 3, sender: "", receiver: "", message: ""},
]
I tried the below code,
const [giftMessages, setGiftMessages] = useState([
{ id: '', sender: '' , receiver: '', giftmsg: '' }
]);
const handleGiftMessages = (e, orderItemId) => {
const updateMessages = [
...giftMessages,
{
id : orderItemId,
[e.target.name]: e.target.value
}
];
setGiftMessages(updateMessages);
}
but it's not coming my expected state format
Try below
const arr1 = [{ oid: 11 }, { oid: 12 }, { oid: 13 }];
const [giftMessages, setGiftMessages] = useState([]);
const handleGiftMessages = (e, orderItemId) => {
setGiftMessages(prevGiftMessages => {
const existingItem = prevGiftMessages.find(item => item.id === orderItemId);
return (!existingItem
? [
...prevGiftMessages,
{ id: orderItemId, sender: "", receiver: "", giftmsg: "" }
]
: prevGiftMessages
).map(giftMessage => {
if (giftMessage.id === orderItemId) {
return {
...giftMessage,
id: orderItemId,
[e.target.name]: e.target.value
};
}
return giftMessage;
});
});
};
Code sandbox => https://stackblitz.com/edit/react-val2gy?file=src%2FApp.js