What causes this component was created without expected prop error in my Svelte app?

Question

I am working on a small Todo app in Svelte for learning purposes (Im new to Svelte).

In App.svelte I import the TodoItem component loop a todosarray:

import TodoItem from './TodoItem.svelte';
//more code

{#each todos as t, index}<TodoItem t/>{/each}

In TodoItem.svelte I have:

<script>
    import { createEventDispatcher } from 'svelte';
    export let index;
    export let t;
    export let id;
    export let title;
    export let completed;
    
    //more code here
</script>

<tr>
    <td>{index + 1}</td>
    <td class="{t.completed == true ? 'completed' : ''}">{t.title}</td>
    <td class="text-center"><input type="checkbox" checked="{t.completed}" on:change={completeTodo(t.id)}></td>
    <td class="text-right">
        <div class="btn-group">
            <button on:click="{() => editTodo(t.id)}" class="btn btn-sm btn-primary">Edit</button>
            <button on:click="{deleteTodo(t.id)}" class="btn btn-sm btn-danger">Delete</button>
        </div>
    </td>
</tr>

In the console I get errors like this one "<TodoItem> was created without expected prop 'index'", as this REPL shows.

UPDATE

I replaced {#each todos as t, index}<TodoItem t/>{/each} with {#each todos as t, index}<TodoItem t index={index} id={t.id} title={t.title} completed=false />{/each} but I still get undefined for the title.

What is missing?

Answer 1

You don’t provide index as a prop for component. Change your component call to <Todoitem {t} {index}/> or change export let index to let index, then the component doesn’t expect index-property.
EDIT: Fixed the shorthand codes to correct ones ie. {t}