Input field not erasing React


I’m learning React and I created a simple todo list app and I’m trying to erase the input field as I did for my onClick function on my keypress function. However, it doesn’t render the same when I use setTodoInput(""); on that keypress function. It only shows the first character of the input. If I comment out setTodoInput(""); out of the keypress function, it works fine, but the input field doesn’t erase. I don’t understand why although I have a controlled input, it doesn’t function the same. if someone can please explain, it would be appreciated.

this is my code for my App file:

import React, { useState } from "react";
import InputArea from "./InputArea";
import ToDoTask from "./ToDoTask";

function App() {
  const [todoTasks, setTodoTasks] = useState([]);

  function addTask(todoInput) {
    setTodoTasks((prevTodoTasks) => {
      return [...prevTodoTasks, todoInput];
    });
  }

  function handleKeyPress(event) {
    if (event.key === "Enter") {
      setTodoTasks((prevTodoInput) => {
        const newTodoInput = event.target.value;
        return [...prevTodoInput, newTodoInput];
      });
      // const newTodoInput = event.target.value;
      //   setTodoTasks((prevTodoTasks) => {
      //     console.log(newTodoInput);
      //     return [...prevTodoTasks, newTodoInput];
      //   });
      // }
    }
  }

  function deleteTodoTask(id) {
    setTodoTasks((prevTodoTasks) => {
      return prevTodoTasks.filter((task, i) => {
        return i !== id;
      });
    });
  }

  return (
    <div className="container">
      <div className="heading">
        <h1>To-Do List</h1>
      </div>
      <div className="form">
        <InputArea onAdd={addTask} onKeyPress={handleKeyPress} />
      </div>
      <div>
        <ul>
          {todoTasks.map((todoTasks, i) => (
            <ToDoTask
              key={i}
              id={i}
              text={todoTasks}
              onChecked={deleteTodoTask}
            />
          ))}
        </ul>
      </div>
    </div>
  );
}

export default App;

I also created an input component:

import React, { useState } from "react";

function InputArea(props) {
  const [todoInput, setTodoInput] = useState("");

  function handleChange(event) {
    const newInput = event.target.value;
    setTodoInput(newInput);
  }

  return (
    <div className="form">
      <input
        onKeyDown={(event) => {
          props.onKeyPress(event);
          setTodoInput("");
        }}
        onChange={handleChange}
        type="text"
        value={todoInput}
      />
      <button
        onClick={() => {
          props.onAdd(todoInput);
          setTodoInput("");
        }}
      >
        <span>Add</span>
      </button>
    </div>
  );
}

export default InputArea;

this is my todoTask component:

import React from "react";

function ToDoTask(props) {
  return (
    <div
      onClick={() => {
        props.onChecked(props.id);
      }}
    >
      <li>{props.text}</li>
    </div>
  );
}

export default ToDoTask;

Source: React – Stack Overflow

October 22, 2021
Category : News
Tags: event-handling | react hooks | reactjs | user-input

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.