I’m currently working on a to-do-list project on the odin project.

I’m currently having trouble rerendering the project array after i deleted a task.

Here’s what I’ve coded so far on my render module:

import { myProjects } from './myProjects.js';

const mainContent = document.querySelector('#main');


export default function renderMain() {
    mainContent.textContent = '';
    let index = this.id;
    console.log(index);

   
    
    const projectCard = document.createElement('div');
    projectCard.classList.add('card');

    const projectCardHeader = document.createElement('h3');
    projectCardHeader.classList.add('cardheader');
    projectCardHeader.textContent =  myProjects[index].name
   projectCard.appendChild(projectCardHeader);    
   
   const projectDue = document.createElement('div');
    projectDue.textContent = myProjects[index].due;
    projectDue.classList.add('date');
    projectCard.appendChild(projectDue);

  
   for (let i = 0; i < myProjects[index].tasks.length; i++) {


   
    const tasks = document.createElement('div');
   const deleteBtn = document.createElement('button');
   deleteBtn.textContent = 'Delete Task';
   deleteBtn.addEventListener('click', () =>{deleteTask(index)
    
   })
 

   
  
   tasks.textContent = myProjects[index].tasks[i].name;
   tasks.classList.add('tasks');
   tasks.appendChild(deleteBtn);
   projectCard.appendChild(tasks);
  
}
    mainContent.appendChild(projectCard)

}

const deleteTask = (taskIndex) => {
    myProjects[taskIndex].tasks.splice(taskIndex, 1);
    renderMain();
}

For Context, here’s my index.js code:

import './styles.css';
import { myProjects } from './myProjects.js';
import renderMain from './renderMain.js';





const mainContent = document.querySelector('#main');
const sideBar = document.querySelector('#sidebarproject');






function renderSidebar() {
    let sidebarHTML = '';
    myProjects.forEach((project, index) => {
        sidebarHTML += `<div class="projects" id="${index}">${project.name}</div>`

    })
    sideBar.innerHTML += sidebarHTML;
    const projects = document.querySelectorAll('.projects');
    projects.forEach(project => 
        project.addEventListener('click', renderMain)
    )
}

I’m currently having trouble to rerender my mainContent when i click on Delete Task button. When I click Delete Task, the task actually got deleted, but the mainContent becomes blank. I can render the mainContent back by clicking the project link on the sidebar and the to-do-list actually got updated and the deleted task is gone.

The error code on the console:

Uncaught TypeError: Cannot read properties of undefined (reading 'id')
    at renderMain (renderMain.js:8:1)
    at deleteTask (renderMain.js:53:1)
    at HTMLButtonElement.<anonymous> (renderMain.js:34:46)

I’m not sure why the renderMain() in the Delete task button won’t render the updated page. Any input would be appreciated, thank you!