filtering an object-array with filter doesn't work for some reason

Question

Hello guys i made a todo application that takes the inputs of the user and makes them todos, and i also added a filtering box but it doesn't seem to work for some reason (it used to work before splitting up the code into function calls and basic code so im gonna let the whole code down here and i hope you understand the code. edit: the filtering returns todos that includes the text in the filtering input box.

The functions call part:

//Read and parse existing data in local storage
const getSavedTodos = function() {
    const todoJSON = localStorage.getItem('todo');

    if (todoJSON !== null) {
    return JSON.parse(todoJSON)
    } else {
        return []
    }
}

// save the todos in locale storage
const saveTodos = function(todos) {
    localStorage.setItem('todo', JSON.stringify(todos))
}

// Render todos 
let renderTodos = function(todo, filters) {
    let filteredTodo = todo.filter(function(todo){
        return todo.text.toLowerCase().includes(filters.text.toLowerCase());
    })

    filteredTodo = todos.filter(function(todo){
        return !filters.hideCompleted || !todo.completed;
    })

    document.querySelector('#todo').innerHTML = '';

    const incompleteTodos = filteredTodo.filter(function (todos) {
        return !todos.completed
    })


    const summary = document.createElement('h2')
    summary.textContent = `You have ${incompleteTodos.length} todos left`
    document.querySelector('#todo').appendChild(summary)

    filteredTodo.forEach(function(todo){
        let p = document.createElement('p');
        p.textContent = todo.text;
        document.querySelector('#todo').appendChild(p);
    })
}

The basic code part:

let todos = getSavedTodos();



let filters = {
    text: '',
    hideCompleted: false
}

renderTodos(todos, filters);

document.querySelector('#filter').addEventListener('input', function(e){
    filters.text = e.target.value.toLowerCase();
    renderTodos(todos, filters);
})

document.querySelector('#form').addEventListener('submit', function(e){
    e.preventDefault();
    todos.push({
        text: e.target.elements.firstName.value,
        completed: false
    })
    saveTodos(todos);
    renderTodos(todos, filters);
    e.target.elements.firstName.value = '';
})

document.querySelector('#hide-completed').addEventListener('change', function(e){
   filters.hideCompleted = e.target.checked;
   renderTodos(todos, filters);
})

The HTML part:

<header class="header">
      <h1>Todos application</h1>  
    </header>

    <input type="text" id="filter" placeholder="filter the todos">
    <label class="checkbox">
            <input type="checkbox" id="hide-completed">
            <span>hide completed todos</span>
    </label>
    <div id="todo"></div>
    <hr>
    <form id="form">
        Add a new todo:
        <input type="text" placeholder="Type your first name" name="firstName" class="inpt">
        <input type="submit" value="submit" class="btn">
    </form>

    <script src="refraction.js"></script>
    <script src="todo-app.js"></script>

Answer 1

Change

filteredTodo = todos.filter(function(todo){
    return !filters.hideCompleted || !todo.completed;
})

to

filteredTodo = filteredTodo.filter(function(todo){
    return !filters.hideCompleted || !todo.completed;
})

Otherwise you scrap the original filtering.