import * as React from "https://cdn.skypack.dev/react@17.0.1";
import * as ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";
import { useState } from "https://cdn.skypack.dev/react"


function App() {
  const [toDo, setToDo] = useState("");
  const [toDos, setToDos] = useState([]);
  const onChange = (event) => setToDo(event.target.value);
  const onSubmit = (event) => {
    event.preventDefault();
    if(toDo === ""){
      return;
    }
    setToDos(currentArray => [toDo, ...currentArray]);
    setToDo("");
  }
  const deleteBtn = (index) => {
    setToDos(toDos.filter((item, toDoIndex) => index !== toDoIndex))
  }
  return (
    <div>
      <h1>My To Dos ({toDos.length})</h1>
      <form>
        <input 
          onChange={onChange}
          value={toDo} 
          type="text" 
          placeholder="Write your to do..." 
        />
        <button onClick={onSubmit}>Add To Do</button>
      </form>
      <hr />
      <ul>
        {toDos.map((item, index) => (
        <li key={index}>{item}
          <button 
            onClick={() => deleteBtn(index)}
            style={{
              backgroundColor:"transparent",
              border:0,
            }}
          >
            ❌
          </button>
        </li>
        ))}
      </ul>
    </div>
  );
}

const element = (
  <div>
    <App />
  </div>
);
ReactDOM.render(element, document.getElementById("root"));