0

Hola estoy trabajando con react js, estoy intentando cambiar el insertar, lo tenia con clases y quiero pasarlo a funciones asi lo tenia enter image description here

enter image description here y asi estoy intentano cambiarlo enter image description here

el formulario enter image description here

y cuando compilo me sale este error enter image description here

me dicen que puede ser por el evento onchange me pueden ayudar a solucionar esta parte porfavor y muchas gracias

2
  • 1
    escribe el código, no es bien recibido en el sitio que anexes código como imagen Commented el 14 ene. 2022 a las 22:50
  • Por favor, aclara tu problema específico o proporciona detalles adicionales para resaltar exactamente lo que necesitas. Tal como está escrito, es difícil saber exactamente qué estás preguntando.
    – Comunidad Bot
    Commented el 15 ene. 2022 a las 8:50

1 respuesta 1

0

Tienes incorrectamente planteada la solución.

1.Para poder agregar valores a un input y almacenarlos en hook useState tienes que asignarle como valor inicial un objeto y adentro el nombre del input.

const [image, setImage] = useState({
    image: ""
})

2.Para poder hacer cambios en el input tienes que usar el setImage en una función y agregar la referencia a el input mediante el evento.

const cambioValor = (e) => {
    setImage({
        [e.target.name]: e.target.value
    })
}

3.En el input agregas en el atributo name el mismo nombre que le pusiste en el objeto inicial del useState en este caso es image.

Nota: No es necesario usar el atributo id en estos casos.

<input type="text" name="image" onChange={cambioValor} placeholder='url de la imagen' />

Al final tendrías algo como lo siguiente.

import React, { useState } from 'react'

export const InsertarPromocion = () => {

    const [image, setImage] = useState({
        image: ""
    })

    const enviarDatos = (e) => {
        e.preventDefault()
        console.log(image)
    }

    const cambioValor = (e) => {
        setImage({
            [e.target.name]: e.target.value
        })
    }

    return (
        <div>
            <h3>Agregar Promocion</h3>
            <form onSubmit={enviarDatos}>
                <input type="text" name="image" onChange={cambioValor} placeholder='url de la imagen' />
                <br />
            </form>
        </div>
    )
}

Nota: Te recomiendo usar un customHook para poder manejar el estado de varios inputs sin necesidad de crear varios useState y así mejorar un poco el performance.

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.