Rendering điều kiện và vòng lặp trong React

Rendering điều kiện và vòng lặp trong React được thực hiện bằng cách sử dụng các cấu trúc điều kiện và vòng lặp trong JSX.

1. Rendering điều kiện

- Sử dụng if-else: Bạn có thể sử dụng cấu trúc if-else trong JSX để kiểm tra một điều kiện và render các phần tử khác nhau dựa trên điều kiện đó.

Ví dụ:

function List({ list }) {
  if (!list) {
    return null;
  }

  if (!list.length) {
    return <p>Sorry.</p>;
  } else {
    return (
      <div>
        {list.map(item => <ListItem item={item} />)}
      </div>
    );
  }
}

- Sử dụng toán tử ba ngôi: Bạn cũng có thể sử dụng toán tử ba ngôi (ternary operator) để rút gọn cấu trúc if-else trong JSX.

Ví dụ:

 {isLoggedin ? <WelcomeUser /> : <Login />}

- Sử dụng logical &&: Khi bạn chỉ muốn hiển thị một phần tử nếu một điều kiện là true, bạn có thể sử dụng toán tử logical &&.

Ví dụ: 

{isLoggedIn && <WelcomeUser />}

2. Rendering vòng lặp

- Sử dụng map: Bạn có thể sử dụng phương thức map để lặp qua một mảng và render các phần tử tương ứng trong JSX.

Ví dụ:

 {users.map((user) => (
       <li key={user.id}>{user.name}</li>
 ))}

 - Sử dụng vòng lặp for: Bạn cũng có thể sử dụng vòng lặp for để lặp qua một mảng và render các phần tử tương ứng trong JSX.

Ví dụ:

let usersList = [];
for (let i = 0; i < users.length; i++) {
  usersList.push(<li key={users[i].id}>{users[i].name}</li>);
}
return <ul>{usersList}</ul>;

- Sử dụng forEach: Bạn cũng có thể sử dụng phương thức forEach để lặp qua một mảng và render các phần tử tương ứng trong JSX.

Ví dụ:

let usersList = [];
users.forEach((user) => {
  usersList.push(<li key={user.id}>{user.name}</li>);
});
return <ul>{usersList}</ul>;

Điều kiện và vòng lặp trong React cho phép bạn tạo ra các UI linh hoạt và tùy chỉnh dựa trên các điều kiện và dữ liệu động. Bằng cách sử dụng các cấu trúc điều kiện và vòng lặp trong JSX, bạn có thể hiển thị các phần tử khác nhau và tạo ra các danh sách dựa trên dữ liệu trong ứng dụng React của bạn.