ตัวอย่างโค้ด for loop ใน nextjs ตามตัวอย่าง

ตัวอย่างโค้ด

import React from 'react'

export default function MyComponent() {
  const numbers = [1, 2, 3, 4, 5]

  return (
    <ul>
      {numbers.map((number, index) => (
        <li key={index}>{number}</li>
      ))}
    </ul>
  )
}

ตัวอย่างอื่น ๆ

ตัวอย่างนี้จะใช้ for loop

class MyComponent extends React.Component {
  render() {
    const items = this.props.items;
    const listItems = [];
    for (let i = 0; i < items.length; i++) {
      listItems.push(<li key={i}>{items[i].name}</li>);
    }
    return <ul>{listItems}</ul>;
  }
}

อีกตัวอย่างจะใช้ for-of

class MyComponent extends React.Component {
  render() {
    const items = this.props.items;
    const listItems = [];
    for (const item of items) {
      listItems.push(<li key={item.id}>{item.name}</li>);
    }
    return <ul>{listItems}</ul>;
  }
}

ถึงจะใช้ for loop ได้หลายแบบ แต่แนะนำให้ใช้ map() เพราะสามารถใช้ประโยชน์จาก React virtual DOM ได้