How to render array of objects with random key and values in React?

Question

I have following array of objects in React:

const arr = [
  { randomnumber: 'random string' },
  { randomnumber: 'random string' }
];

Where every number (key) and string (value) are always random. How to render this? I want to get something like this:

<p> {randomnumber} is: {randomstring} </p>

I've tried few methods with map, but it doesn't work. Any ideas?

Does this answer your question? How to loop through key/value object in Javascript? — 0stone0
– 0stone0, Commented Nov 30, 2022 at 10:01

Arkellys · Accepted Answer · 2022-11-30 09:59:25Z

3

Assuming each object has a single key/value pair, you can use the Object.keys() and Object.values() functions:

arr.map(obj => {
  const [key] = Object.keys(obj);
  const [value] = Object.values(obj);

  return (
    <p key={key}>
      {key} is: {value}
    </p>
  );
});

answered Nov 30, 2022 at 9:59

Arkellys

8,0384 gold badges23 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to render array of objects with random key and values in React?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related