Challenges

Rendering a List

Rendering Arrays in React

Before we jump into the final Todo component, have a look at this:

function Page() {
    return (
        <div>
            {"Learn React"}
        </div>
    )
}

(Try this)

This will render a text as "Learn React". When we were talking about props, we learned about writing JavaScript statements inside curly brackets. We can also do the same inside a <div> or any other HTML/React element.


Now have a look at this:

function Page() {
    return (
        <div>
            {["Learn React"]}
        </div>
    )
}

You should get the same result. It seems like React knows how to render items in an array as well. Nice.


What about this:

function Page() {
    return (
        <ul>
            {[<li>Learn React</li>]}
        </ul>
    )
}

Wow. It seems like we can put HTML elements inside an array as well. Then React will render that for us.

So, the next step is to add multiple items in to the array like this:

function Page() {
    return (
        <ul>
            {
        [
          <li>Learn JavaScript</li>,
          <li>Learn React</li>,
          <li>Learn Next.js</li>,
        ]
      }
        </ul>
    )
}

Cool hah! It renders a list of items. This should be clear for you.

Q: Isn't it?
authenticating...

šŸ™ We need your help

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