import React, { useState } from "react";

function TodoForm({ addTodo }) {

const [input, setInput] = useState("");

const [setTodoArray, todoArray] = useState([]);

const [todo, setTodo] = useState({

id: "",

task: "",

});

functionaddTodo(props) {

props.onAdd(todo);

setTodo({

id: "",

task: "",

});

}

functionhandleSubmit(event) {

letid = Math.floor(Math.random() * 15000);

event.preventDefault();

if (todo.task.trim()) {

addTodo({ ...todo, id });

setTodo({ ...todo, task: "" });

}

console.log({

id,

text: input,

});

setInput("");

}

return (

<div>

<formonSubmit={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>

<buttontype="button"value="Submit"onClick={handleSubmit}>

Add task

</button>

</form>

</div>

);

}

export default TodoForm;