rfc / cmmb / clg

function App():JSX.Element {
}

const [value, setValue] = useState<string>('')

type formElem = React.FormEvent<HTMLFromElement>

const handleSubmit = (event:FormElem):void => {
  event.preventDefault()
  addTodo(value)
  setValue('')
}

interface ITodo {
  test:string
  complete:boolean
}

const [todos, setTodos] = useState<ITodo>([])

const addTodo = (text:string):void => {
  const newTodos:ITodo[] = [..todos, { text, complete: false }]
  setTodos(newTodos)
}

{
  todos.map((todo:ITodo, index:number) => (
    <Fragment key={ index }>
      <div
        style={ { textDecoration: todo.complete ?
          'line-through' : ''
        } }
      >
        { todo.text }
      </div>
      <button type='button' onClick={ ():void => completeTodo(index) }>
        { ' ' }
        { todo.complete ? 'Imcomplete' : 'Complete' }
        { ' ' }
      </button>
    </Fragment>
   ))
}

const completeTodo = (index:number):void => {
  const newTodos:ITodo[] = [...todos]
  newTodos[index].complete = !newTodos[index].complete
  setTodos(newTodos)
}

const removeTodo = { index:number }:void = {
  const newTodos:ITodo[] = [...todos]
  newTodos.splice(index, 1)
  setTodo(newTodos)
}

<button
  type='button'
  onClick={ ():void => removeTodo(index) }>
>
&times;
</button>