I have an input working with useState and the onChange event. When I hit add text, I see the "React Developer Tools" extension added to my array. The problem arises when I enter a single character, for example "w", it enters it correctly, but if I put "w" again it does not appear and does not generate any change. This only happens when I enter a character and then want to enter the same character again. For what is this ?
Put a reset on the input and also clean the State but the problem still continues.
In this image, enter the character "f" that appeared in the first State, press "Add" and it was added to the second State and the data was cleaned. Again I placed "f" again and it does not appear, and when I press "Add" in the console it returns me the empty field message, but if I place any other character, it recognizes it and adds it.
import React from "react";
import { useState } from "react";
const FormularioLista = () => {
const [tarea, setTarea] = useState(" ");
const [lista, setlista] = useState([]);
const enviarDatos = (e) => {
e.preventDefault();
//Verifica que no este vacio
if (!tarea.trim()) {
console.log("No se ha ingresado nada");
return;
}
//Agrega la tarea al arreglo
setlista([...lista, { id: "x", nombreTarea: tarea }]);
//Limpia el campo y useState
e.target.reset();
setTarea("");
};
return (
<>
<div className="container">
<h1 className="text-center mb-4">Crud Simple</h1>
<div className="row">
<div className="col-5 border">
<h4 className="text-center">Agregar Tarea</h4>
<form onSubmit={enviarDatos}>
<input
type="text"
className="form-control mt-3 mb-2"
placeholder="Ingrese Tarea"
onChange={(e) => setTarea(e.target.value)}
/>
<button type="submit" className="btn btn-primary ">
Agregar
</button>
</form>
</div>
</div>
</div>
</>
);
};
export default FormularioLista;
First of all, I think you'll find it much easier to use the input as a controlled component .
I leave your code with a couple of changes that I think solve your problem:
In case the changes do not jump to the naked eye, I tell you:
I added value={task} in the input, so that the content of the input is always equal to the status task , this way you avoid having to reset the input, you only do it with the status.
On the other hand, before adding the task to the list, I generate a new constant
const nombreTarea = tarea
, this is to make sure that said constant has the desired value of the task that we are going to add, since the way React internally handles its state changes , is not always necessarily synchronous, and this can lead to unintentional errors.Greetings.
it is because you are starting your state as empty
const [tarea, setTarea] = useState(" ");
and then you take the old value and the new value, and since your input has no value(value)
, it creates an unknown object and adds the data you add in the inputin this case it is better to create a state with your values that you want to add, the id, I see it as a bit unnecessary, but since you declare it as
x
default, it is the same as starting it from the beginning of the statesolving your problem, it would be like this and if you want to clean the input when doing the submit, you just call the state and declare the empty data