Challenges

Rendering a List

Usually we will have to render a list of things. So, here's how to do that in React:

function TodoList(props) {
    return (
        <ul>
            {props.items.map((item, index) => (
                <li key={index}>{item}</li>
            ))}
        </ul>
    )
}

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

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

Isn't it looks confusing?

Okay. Stay with me. I'll show you what's going on here. It's somewhat weird, but you'll understand it.

šŸ™ We need your help

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