Tengo un formulario con 3 campos de entrada como remitente, receptor y mensaje, el formulario está dentro del bucle for con una identificación única:
ahora quiero actualizar el estado al ingresar a los campos del formulario, mi estado esperado como el siguiente
[ {id: 1, sender: "", receiver: "", message: ""}, {id: 2, sender: "", receiver: "", message: ""}, {id: 3, sender: "", receiver: "", message: ""}, ]Probé el siguiente código,
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); }pero no viene mi formato de estado esperado
Prueba a continuación
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; }); }); };Caja de arena de código => https://stackblitz.com/edit/react-val2gy?file=src%2FApp.js