toDo-Modify-1.jsx

// Change #1
import React, { useState, useEffect } from 'react';
import axios from 'axios';

// Change #1.1 
const token = 'ba8c19a8c3b84112d8006704aec4e9fbe5a6b2d9';
const config = {
  headers: { Authorization: `Bearer ${token}` }
};



// Change #2
const [todos, setTodos] = useState([]);
  useEffect(async () => {
    const result = await axios.get(
      'https://api.todoist.com/rest/v1/tasks',
      config
    );

    setTodos(result.data);
  }, []);

// Change #3
  <Checkbox 
        checked={item.completed}
        onChange={onCheckItem}
      >{item.content}</Checkbox>

// Change #4
const onRemove = (id) => {
    const index = todos.findIndex(todo => todo.id === id);

    if (index !== -1) {
      axios.delete(
        `https://api.todoist.com/rest/v1/tasks/${id}`,
        config
      );
      todos.splice(index, 1);
      setTodos([...todos]);
    }
  }

// Change #5
  const onSubmit = async (content) => {
    const todo = { content };

    const { data } = await axios.post(
      `https://api.todoist.com/rest/v1/tasks`,
      todo,
      config
    );

    setTodos([...todos, {...todo, id: data.id}]);
  }