Tengo un formulario con onChange, en la función onChange necesito guardar valores.
const [choosenVar, setChoosenVar] = useState([ { posto1: { name: '', value: '' }, }, { posto2: { name: '', value: '' }, }, { posto3: { name: '', value: '' }, }, { posto4: { name: '', value: '' }, }, { posto5: { name: '', value: '' }, }, { posto6: { name: '', value: '' }, }, ]); const onChange = event => { const { name, value, id } = event.target; // setchoosenVar({ ...choosenVar, [`posto${id}.nome`]: value }); const newArr = [...choosenVar]; };Ahora mi problema es para cada "id" en event.target, debo guardar el nombre y el valor en posto"id", ¿cómo puedo hacerlo?
Ejemplo:
const onChange = event => { const { name, value, id } = event.target; // name: "Application", value: "appSett", id: "1" // in this case I should take: choosenVar.posto1 and set choosenVar.posto1.name = name, choosenVar.posto1.value= value. };Siempre haga una copia de las variables de estado de la matriz primero usando ... (operador de propagación).
findIndex() y actualice el objeto en el índice encontrado. Usando Object.keys() estamos obteniendo todas las claves del objeto, ya que solo nos preocupa la primera que buscamos.
Es posible que necesite propagarse nuevamente para hacer una copia del objeto para que no mute el estado de alguna manera
const onChange = event => { const { name, value, id } = event.target; const newArr = [...choosenVar]; let foundIndex = newArr.findIndex(x => { return Object.keys(x)[0] === `posto${id}` }); let copyObject = {...(newArr[foundIndex][`posto${id}`]) }; newArr[foundIndex] = { [`posto${id}`] : copyObject }; setChoosenVar(newArr ); };Nota: Lo anterior asume que no hay objetos vacíos. Y el Id que estás buscando existe.
Me gustaría agregar que podría ser una mejor manera de almacenar su estado. Una matriz con elementos como podría ser más fácil de manejar
{ posto: { id : 1, name: '', value: '' }, }Puedes hacer lo siguiente:
const { name, value, id } = event.target; setChoosenVar({ ...choosenVar, ...{`posto${id}`:value} })