Pada artikel ini, kita akan melihat bagaimana melakukan Iterasi dengan foreach loop. Kami akan melakukan untuk atau untuk setiap loop dengan fungsi Map (diperkenalkan di ES6). Mari kita lihat beberapa contoh:

Metode yang paling sering digunakan untuk melakukan iterasi pada array di React adalah fungsi Map . Ini adalah contoh dasar dari Map:

App.js

import React from 'react';

const names = ['Name 1', 'Name 2', 'Name 3', 'Name 4', 'Name 5'];

function App() {
  return (
    <ul>
      {names.map(name => (
        <li>
          {name}
        </li>
      ))}
    </ul>
  );
}

export default App;

Ulangi dengan Indeks

<ul>
  {names.map((name, index) => (
    <li>
      {index} - {name}
    </li>
  ))}
</ul>

Array Multidimensi

Mari jalankan loop dalam array multidimensi:

App.js

import React from 'react';

const students = [
  {
    'id': 1, 
    'name': 'Student 1', 
    'email': '[email protected]'
  },
  {
    'id': 2, 
    'name': 'Student 2', 
    'email': '[email protected]'
  },
  {
    'id': 2, 
    'name': 'Student 3', 
    'email': '[email protected]'
  },
];

function App() {
  return (
    <div>
       <table className="table table-bordered">
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
            </tr>
  
            {students.map((student, index) => (
              <tr data-index={index}>
                <td>{student.id}</td>
                <td>{student.name}</td>
                <td>{student.email}</td>
              </tr>
            ))}
  
        </table>
    </div>
  );
}

export default App;

Itu dia. Terima kasih sudah membaca.🙂