Why does my input still stay after i hit Submit?-CodePudding

After i type in the searchbox and hit the button, my input still stays in the searchbox. I was given a mistake as "TypeError: todos is not iterable onFormSubmit". I did install the uuid. Anything wrong with my codes? Can anybody help me? Thank you so much!

This is my Form.js:

import React from "react";
import { v4 as uuidv4 } from "uuid";

function Form({ input, setInput, todos, setTodos }) {
  const onInputChange = (event) => setInput(event.target.value);
  const onFormSubmit = (event) => {
    event.preventDefault();
    setTodos([
      ...todos,
      {
        id: uuidv4(),
        title: input,
        completed: false,
      },
    ]);
    setInput("");
  };
  return (
    <form onSubmit={onFormSubmit}>
      <div>
        <input
          type="text"
          placeholder="add a todo..."
          value={input}
          required
          onChange={onInputChange}
        />{" "}
        <button className="button-add" type="submit">
          {" "}
          add{" "}
        </button>{" "}
      </div>{" "}
    </form>
  );
}

export default Form;

This is my App.js:

import React, { useState } from "react";
import "./App.css";
import Header from "./components/Header";
import Form from "./components/Form";
import TodoList from "./components/TodoList";

function App() {
  const [input, setInput] = useState("");
  const [todos, setTodos] = [];
  return (
    <div>
      <div className="container">
        <div className="app-wrapper">
          <div>
            <Header />
            <Form
              input={input}
              setInput={setInput}
              todos={todos}
              setTodos={setTodos}
            />{" "}
            <TodoList todos={todos} setTodos={setTodos} />{" "}
          </div>{" "}
        </div>{" "}
      </div>{" "}
    </div>
  );
}
export default App;

CodePudding user response：

You are not using useState hook inside your App.js file.

function App(){
    const [todos, setTodos] = useState([]);
}

Try this.

CodePudding user response：

In your App.js -> function App()

change

const [todos, setTodos] = [];

const [todos, setTodos] = useState([]);