Form doesn't clear when handleSubmit is ran

Question

Everything else (as far as I can tell) within my handleSubmit function is being executed when submit button is clicked. Can someone help me understand why the form isn't clearing? I've attached my ToDoForm.js and my App.js file.

import React, { useState } from "react";

function TodoForm(props) {
  const [input, setInput] = useState("");

  //   const inputRef = useRef(null);

  //   useEffect(() => {
  //     inputRef.current.focus();
  //   });

  function handleSubmit(event) {
    setInput("");
    console.log("handlesubmit ran");
    event.preventDefault();

    props.onSubmit({
      id: Math.floor(Math.random() * 15000),
      text: input,
    });
  }
  return (
    <form onSubmit={handleSubmit}>
      <header>What do you have to do today?</header>
      <input type="text" placeholder="Add a task to your list"></input>
      <button type="button" value="Submit" onClick={handleSubmit}>
        Add task
      </button>
    </form>
  );
}

export default TodoForm;

import "./App.css";
import TodoForm from "./components/TodoForm";


function App() {
  return (
    <div className="App">
      <TodoForm />
    </div>
  );
}

export default App;

It looks like you have not attached `input` state variable to your `` element. Have a look at this answer, hope it helps https://stackoverflow.com/a/58211012/2120289 — Artyom Neustroev, Oct 02 '22 at 17:45

Topsy · Answer 1 · 2022-10-02T18:14:58.030

0

Your input tag does not use any state.

Use the "value" attribute to pass your input state to .

 <input type="text" placeholder="Add a task to your list"/  value={input}>

edited Oct 02 '22 at 18:14

answered Oct 02 '22 at 17:58

Topsy

1,023
1
11
26

score 0 · Accepted Answer · answered Oct 02 '22 at 18:02

TodoForm.js

import React, { useState } from "react";
        
    function TodoForm(props) {
      const [input, setInput] = useState("");
    
      //   const inputRef = useRef(null);
    
      //   useEffect(() => {
      //     inputRef.current.focus();
      //   });
    
      function handleSubmit(event) {
        setInput("");
        console.log("handlesubmit ran");
        event.preventDefault();
    
      }
      return (
        <form onSubmit={handleSubmit}>
          <header>What do you have to do today?</header>
          <input type="text" placeholder="Add a task to your list" value={input} onChange={(e)=>setInput(e.target.value)}></input>
          <button type="button" value="Submit" onClick={handleSubmit}>
            Add task
          </button>
        </form>
      );
    }
    
    export default TodoForm;

App.js

import "./App.css";
import TodoForm from "./components/TodoForm";


function App() {
  return (
    <div className="App">
      <TodoForm />
    </div>
  );
}

export default App;

score 0 · Answer 3 · answered Oct 02 '22 at 18:24

I don't know why you used the props.onSubmit functionality but I would implement the same thing as follows:

import React, { useState } from "react";

function TodoForm(props) {
  const [input, setInput] = useState("");

  function handleSubmit(event) {
    event.preventDefault();
    setInput("");
    console.log("handlesubmit ran");

    console.log({
      id: Math.floor(Math.random() * 15000),
      text: input
    });
  }

  return (
    <form onSubmit={handleSubmit}>
      <header>What do you have to do today?</header>
      <input
        type="text"
        placeholder="Add a task to your list"
        value={input}
        onChange={(e) => setInput(e.target.value)}
      />
      <button type="button" onClick={handleSubmit}>
        Add task
      </button>
    </form>
  );
}

export default TodoForm;

You have to set the value and onChange properties on the input tag to get the values. The value property should be set to input state value and the onChange property should be set to an arrow function to set the input state value to the text value that we have typed in the input field. That's how form values are submitted in React.

Try the code in codesandbox: https://codesandbox.io/s/mutable-sun-lpf2o8?file=/src/TodoForm.js

Form doesn't clear when handleSubmit is ran

3 Answers3