Tại sao mỗi component React chỉ có thể return một element duy nhất ở cấp cao nhất?

Bởi vì JSX dưới nền tảng thực chất được compile thành các lời gọi hàm JavaScript (React.createElement()).

Trong JavaScript, một hàm chỉ có thể return về một giá trị duy nhất (một object). Bạn không thể bắt một hàm return về hai object độc lập xếp liền nhau trừ khi bạn gói chúng vào một mảng hoặc một object lớn hơn.

Cách giải quyết:
Để trả về nhiều element song song, bạn cần nhóm chúng lại:
1. Sử dụng thẻ HTML wrapper như <div className="wrapper">...</div> (nếu phù hợp với UI).
2. Hoặc sử dụng React Fragment (<>...</>) để nhóm lại trên Virtual DOM nhưng tránh sinh ra node dư thừa trên HTML DOM thật.