Looping

  • 1. Step

    1. Array Data

    map is used to looping
    
    
                 const users = ['Alice', 'Bob', 'Charlie'];
    
                function UserList() {
                  return (
                    <ul>
                      {users.map((name, index) => (
                        <li key={index}>{name}</li>
                      ))}
                    </ul>
                  );
                }
    
    
                

    2. Object Data

    
    
                const users = [
                  { id: 1, name: 'Alice', email: 'alice@mail.com' },
                  { id: 2, name: 'Bob', email: 'bob@mail.com' },
                ];
    
                function UserTable() {
                  return (
                    <table>
                      <thead><tr><th>Name</th><th>Email</th></tr></thead>
                      <tbody>
                        {users.map((row) => (
                          <tr key={row.id}>
                            <td>{row.name}</td>
                            <td>{row.email}</td>
                          </tr>
                        ))}
                      </tbody>
                    </table>
                  );
                }