2

No entiendo por que al escribir en el input de name al escribir una letra se sale del input, pero con el input de stock funciona perfecto, no entiendo por que pasa esto si funcionan con la misma función.

import { useState } from "react"

export default function Home() {

  const [data, setData] = useState({
    name: 'Airpods Pro',
    variations: [
      {name: 'azul', stock: 15},
      {name: 'celeste', stock: 10},
    ]
  })

  const handleInputChange = (index: number, key: string, value: any) => {
    setData((prev: any) => {
      const newVariation = [...prev.variations]
      newVariation[index][key] = value
      return {...prev, variations: newVariation}
    })
  }

  return (
    <div>
      {
        data.variations.map((variation, index) => (
          <div key={variation.name}>
            <input type='text' placeholder="Nombre" value={variation.name} onChange={(e: any) => handleInputChange(index, 'name', e.target.value)} />
            <input type='text' placeholder="Stock" value={variation.stock} onChange={(e: any) => handleInputChange(index, 'stock', e.target.value)} />
          </div>
        ))
      }
    </div>
  )
}

1 respuesta 1

1

El problema está en el key de tu map. Al cambiar variations.name, cambia el key y se renderiza nuevamente el input, por eso parece que te saca el mouse.

Probá inventarle un key, algo como key={`input-${index}`}

Te pasa con name solamente porque le pusiste variations.name, si pusieras variations.stock tendrias el problema con el otro input.

https://codesandbox.io/s/hungry-paper-rbn1qz?file=/src/App.js

Importante tener en cuenta nombrar bien los keys porque esos errores no siempre se ven en el inspector. Saludos!

3
  • Muchísimas gracias amigo, le estuve dando muchísimas vueltas y no encontraba el problema Commented el 8 mar. 2023 a las 18:43
  • 1
    Buenisimo, dos cosas: 1- si la respuesta solucionó tu problema la podes marcar como aceptada y 2 (y mas importante)- pensa lo siguiente: Estas actualizando el estado de tu componente cada vez que apretas una tecla en el input. Eso en grandes aplicaciones puede traer problemas de rendimiento, te aconsejo que le metas un debounce al cambio de estado, para que se haga recien cuando el usuario termine de escribir freecodecamp.org/news/debouncing-explained
    – Agustin G.
    Commented el 9 mar. 2023 a las 12:00
  • 1
    un debounce es un retraso de tiempo que esperamos antes de ejecutar la funcion, si vos le pones un debounce de 200 milisegundos, y probas escribir una palabra en el input, por ejemplo "ABCD", y lo haces relativamente rapido, A B C no actualizan el estado, pero cuando apretas D y pasan 200ms sin escribir nada, recien ahi se actualiza el estado con ABCD. Es una forma de "esperar" que escribas todo para actualizar el estado una sola vez.
    – Agustin G.
    Commented el 9 mar. 2023 a las 12:02

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.