我有一个名为tour的对象，其结构如下：

const tour = {
  date: dateBetweenFormat(13),//returns string
  where: "NY",
  info: "group full",
  amount: "750$",
  place: "hotel",
};

我想在React中将这个对象的属性呈现为JSX元素，避免重复代码。所需的输出是在元素中显示每个属性，属性名作为标签，属性值显示在标签旁边。
我尝试使用for... in循环和Object.entries（）来迭代对象的属性，但我遇到了一个错误，指出“对象作为React子对象无效”。
下面是我尝试的代码：

<div className="mb-2">
  {(() => {
    const elements = [];
    for (let key in tour) {
      elements.push(
        <div
          key={key}
          className="flex bg-blue-200 px-4 mt-1 h-9 font-bold items-center text-blue-500 text-opacity-60"
        >
          {key}: {tour[key]}
        </div>
      );
    }
    return elements;
  })()}
</div>

并且：

<div className="mb-2">
          {Object.entries(tour).map(([key, value]) => (
            <div
              key={key}
              className="flex bg-blue-200 px-4 mt-1 h-9 font-bold items-center text-blue-500 text-opacity-60"
            >
              {value}
            </div>
          ))}
        </div>

预期：

<div className="mb-2">
          <div className="flex bg-blue-200  px-4 mt-1 h-9 font-bold items-center text-blue-500 text-opacity-60">
            {tour.date}
          </div>
          <div className="flex bg-blue-200  px-4 mt-1 h-9 font-bold items-center text-blue-500 text-opacity-60">
            {tour.info}
          </div>
          <div className="flex bg-blue-200  px-4 mt-1 h-9 font-bold items-center text-blue-500 text-opacity-60">
            {tour.amount}
          </div>
          <div className="flex bg-blue-200  px-4 mt-1 h-9 font-bold items-center text-blue-500 text-opacity-60">
            {tour.place}
          </div>
        </div>

有人能指导我如何在React中使用循环正确渲染这个对象的属性吗？有没有更好的方法可以做到这一点？
提前感谢您的帮助！