Search code examples
javascriptreactjsonchange

React onChange is not working. Can someone help me?


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:

enter image description here


Solution

  • 
     <input
       type="text"
       className="input-text"
       placeholder="Nombre Proyecto"
       name="nombre"
       value={nombre}
       onChange={onChangeProyecto}
    />