How would you combine filter() and map() to display only fruits with names longer than 5 characters and transform them into uppercase?

Đáp án đúng: "const items = ["Apple", "Banana", "Cherry", "Avocado"];

return ( <ul> {
  items.filter(item => item.length > 5) .map(item => <li key={
    item
  }
  >{
    item.toUpperCase()
  }
  </li>)
}

</ul> );". Lần theo mã: filter giữ phần tử có length lớn hơn 5 nên Apple (đúng 5 ký tự) bị loại, còn Banana, Cherry, Avocado; sau đó map biến mỗi chuỗi thành một thẻ li có key là chính chuỗi đó và nội dung là item.toUpperCase(), nên danh sách hiện BANANA, CHERRY, AVOCADO. Lọc trước rồi biến đổi sau là đúng vì điều kiện lọc dựa trên chuỗi gốc. Phương án chứa ".map(item =>

<li>{
  item
}
</li>

)" lọc đúng nhưng không gọi toUpperCase nên chữ giữ nguyên, lại thiếu key nên React cảnh báo. Phương án chứa "</li>).filter(item => item.length > 5)" map trước tạo ra phần tử React rồi mới lọc; phần tử React không có length nên điều kiện luôn sai và danh sách rỗng. Phương án chứa "items.map(item => item.toUpperCase()).filter" lọc ra đúng ba chuỗi viết hoa nhưng không bọc trong thẻ li, nên chúng hiện dính liền thành một dòng chữ chứ không thành các mục danh sách.