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.