Challenges

Rendering a List

Using Arrays as Props

First let's look at the Page component:

function Page() {
    const items = [
        "Learn JavaScript",
        "Learn React",
        "Learn Next.js"
    ]

    return (
        <div>
            <h1>My Todo List</h1>
            <TodoList items={items} />
        </div>
    )
}

Here we define an array called items. Then we pass that into the TodoList component. You might be confused when I wrote it like this: items={items}.

The First items is the prop name & the other one is the variable name. If you need, we can write it like this as well:

<TodoList
    items={[
        "Learn JavaScript",
        "Learn React",
        "Learn Next.js"
    ]}
/>

šŸ™ We need your help

We need your help to keep maintain & add new content to this course. Here's how you can support us: