import React, { useState } from "react";

function TodoForm(props) {

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

  const onChange = (e) => {
    setInput(e.target.value);
  };

  const Submit = (e) => {
    e.preventDefault();

    props.onSubmit({
      id: Math.floor(Math.random() * 10000),
      text: input,
      status: false
    });
    setInput("");
  };
  return (
    <>
      <form onSubmit={Submit}>
        <div className="add-form">
          <div className='form-control'>
            <input
              placeholder="Enter Item"
              value={input}
              onChange={onChange}
              name="text" />
          </div>
          <button className="btn" onClick={Submit}>Submit</button>
        </div>
      </form>
    </>
  );

}

export default TodoForm;