I have a weird problem with this code. I think everything is correct, and I compared it with other similar codes and I can't find the issue.
The thing is that the onChange
is not writing on input on my React Component. But, if I change the name of the useState initial value, so it does not match my input, it works, because it has no relation with the initial object.
Here is my code:
import React, { Fragment, useState } from "react";
const NuevoProyecto = () => {
//State para proyecto
const [proyecto, guardarProyecto] = useState({
nombre: "",
});
//extraer nombre de proyecto
const { nombre } = proyecto;
//Lee contenidos del Input
const onChangeProyecto = (e) => {
guardarProyecto({
...proyecto,
[e.target.name]: e.target.value,
});
};
//Cuando el user envia un proyecto
const onSubmitProyecto = (e) => {
e.preventDefault();
//Validar el proyecto
//agregar al state
//reiniciar el form
};
return (
<Fragment>
<button type="button" className="btn btn-block btn-primario">
Nuevo Proyecto
</button>
<form className="formulario-nuevo-proyecto" onSubmit={onSubmitProyecto}>
<input
type="text"
className="input-text"
placeholder="Nombre Proyecto"
nombre="nombre"
value={nombre}
onChange={onChangeProyecto}
/>
<input
type="submit"
className="btn btn-primario btn-block"
value="Agregar Proyecto"
/>
</form>
</Fragment>
);
};
export default NuevoProyecto;
Here is the picture of the Components Dev Tool with the input:
<input
type="text"
className="input-text"
placeholder="Nombre Proyecto"
name="nombre"
value={nombre}
onChange={onChangeProyecto}
/>