A todo application in React using hooks I am learning React and wanted to implement a todo app using function components. Any suggestions and criticism is welcome, especially regarding best practices.

import React, {useState} from 'react';

class Todo {
  constructor(id, description, complete) {
    this.id = id;
    this.description = description;
    this.complete = complete;
  }
}

export default () =&gt; {

  const [idCounter, setIdCounter] = useState(1);
  const [todoList, setTodoList] = useState([]);
  const [todoDescription, setTodoDescription] = useState('');

  function addTodo() {
    setTodoList(
      [...todoList, new Todo(idCounter, todoDescription, false)]
    );
    setIdCounter(idCounter + 1);
    setTodoDescription('');
  }

  function markTodoItemComplete(id) {
    const todoListClone = todoList.slice();
    todoListClone[id - 1].complete = true;
    setTodoList(todoListClone);
  }

  return &lt;&gt;
    {todoList.map((todoItem) =&gt; {
      return (
        &lt;React.Fragment key={todoItem.id}&gt;
          &lt;span&gt;{todoItem.id} - {todoItem.description} - {todoItem.complete ? 'Completed' : 'Waiting'}&lt;/span&gt;
          &lt;button
            onClick={() =&gt; markTodoItemComplete(todoItem.id)}
            disabled={todoItem.complete}&gt;
            Mark as complete
          &lt;/button&gt;
          &lt;br/&gt;
        &lt;/React.Fragment&gt;
      );
    })}
    &lt;br/&gt;
    &lt;input
      onChange={e =&gt; setTodoDescription(e.target.value)}
      value={todoDescription}
    /&gt;
    &lt;br/&gt;
    &lt;button
      disabled={!todoDescription}
      onClick={addTodo}&gt;Add Todo
    &lt;/button&gt;
  &lt;/&gt;
}
function markTodoItemComplete(id) {
    const todoListClone = todoList.slice();
    todoListClone[id - 1].complete = true;
    setTodoList(todoListClone);
  }


This seems me not good practice, what you could have done is just getting id(key) of array and just set it to true.
like

 function markTodoItemComplete(id) {
    todoListClone[id].complete = true;
  }