todo.tsx

import React, { useState } from "react";
const Todo = () => {
  const [todoName, setTodoName] = useState("");
  const [todoList, setTodoList] = useState<string[]>([]);

  const inputChangeHandler = (evt: React.ChangeEvent<HTMLInputElement>) => {
    setTodoName(evt.target.value);
  };

  const todoAddHandler = () => {
    //we need to add it to our list
  };
  return (
    <React.Fragment>
      <input
        type="text"
        placeholder="Todo"
        onChange={inputChangeHandler}
        value={todoName}
      />
      <button type="submit" onClick={todoAddHandler}>
        Add
      </button>
      <ul>
        {todoList.map((todo: string) => (
          <ul key={todo}>{todo}</ul>
        ))}
      </ul>
    </React.Fragment>
  );
};
export default Todo;