Form doesn't clear when handleSubmit is ran-CodePudding

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;

CodePudding user response：

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;

CodePudding user response：

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}>

CodePudding user response：

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