Challenges

Rendering a List

Using Array.map

Now, let's have a look at the original TodoList component:

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

Isn't it something like this:

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

Instead of hard-coded todo items, it picks values from a prop. Then it uses JavaScript Array.map helper to create an HTML li element for the string item.


Have a look at this code block:

(Use this React playground to try React)

function TodoList(props) {
  const list = [];
  props.items.forEach((item, index) => {
    list.push(<li key={index}>{item}</li>)
  })
  
    return (
        <ul>
            {list}
        </ul>
    )
}
Q: What do you think about 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: