Question 184686 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – 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 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!

Tags:

3

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
  3. 0

    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?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search