Rendering an object's properties as JSX elements in React using a loop

I have an object called tour with the following structure:

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

I would like to render the properties of this object as JSX elements in React, avoiding repetitive code. The desired output is to have each property displayed within a <div> element, with the property name as a label and its value shown next to it.

I tried using a for...in loop and Object.entries() to iterate over the object's properties, but I encountered an error stating "Objects are not valid as a React child."

Here's the code I attempted:

<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>

And:

<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>

Expecting:

<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>

Can someone please guide me on how to correctly render the properties of this object using a loop in React? Is there a better approach I can take to achieve this?

Thank you in advance for your help!

Did you try something like:

<div className="mb-2">
  {Object.keys(tour).map((key) => {
    return (
       <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>
    )
  })}
</div>

Try it like this :

<div className="mb-2">
  {Object.keys(tour).map((key) => (
    <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>
  ))}
</div>

With your code you provided I was able to get it working in a code sandbox here https://codesandbox.io/s/react-repl-forked-nc4hj5?file=/src/index.js

I tried both methods and I removed the date from the object because I didn't have that function provided. I think there's something wrong with your date format function. It's not returning a string likely and it's throwing that error.

Make sure you use .toString() on the date object before returning it

Can you provide the date format function?